.card
{
background-color
:
theme
(
"colors.white"
);
border-radius
:
theme
(
"borderRadius.lg"
);
padding
:
theme
(
"spacing.6"
);
box-shadow
:
theme
(
"boxShadow.xl"
);
@layer
utilities {
.content-auto
{
content-visibility
:
"auto"
;
.btn
{
background
:
#ffffff
;
上方文件会被这个工具转化成一个
tailwindcss plugin
，类似下方这样:
const _plugin = require('tailwindcss/plugin')
const returnSelfNoop = (x) => x
const css2TwPlugin = _plugin.withOptions(
function (_options = {}) {
const { withOptionsWalkCSSRuleObject = returnSelfNoop } = _options
return function ({ addBase, addComponents, addUtilities, theme, addVariant, config, corePlugins, e, matchComponents, matchUtilities, matchVariant }) {
const _baseCss = withOptionsWalkCSSRuleObject(
h1: {
'font-size': theme('fontSize.2xl')
h2: {
'font-size': theme('fontSize.xl')
'base'
addBase(_baseCss)
const _componentsCss = withOptionsWalkCSSRuleObject(
'.card': {
'background-color': theme('colors.white'),
'border-radius': theme('borderRadius.lg'),
padding: theme('spacing.6'),
'box-shadow': theme('boxShadow.xl')
'components'
addComponents(_componentsCss)
const _utilitiesCss = withOptionsWalkCSSRuleObject(
'.content-auto': {
'content-visibility': '"auto"'
'utilities'
addUtilities(_utilitiesCss)
function (_options) {
return {}
module.exports = css2TwPlugin
<npm / yarn / pnpm> i -D css-to-tailwindcss-plugin
假如你想要处理 tailwindcss's Functions & Directives，你必须安装 tailwindcss。
同样为了支持 scss/sass 文件处理，你必须要安装 sass。
css2plugin build path/to/your.css path/to/your-another.scss --out ./tw-plugins
执行命令后，一个 <css-file-name>.js 文件将被生成在 out 指定的 tw-plugins 目录中。
css2plugin build -h for more options
Nodejs Api
使用方式以及选项对应的用途:
import { createContext } from 'css-to-tailwindcss-plugin'
const ctx = createContext({
atImportOptions: {},
sassOptions: {},
tailwindcssConfig: '',
tailwindcssResolved: false,
generatorOptions: {},
outSideLayerCss: 'components',
withOptions: true,
interceptors: {
css:[
(root,ctx)=>{
postcssPlugins:(plugins)=>{
await ctx.process('path/to/your.css')
await ctx.process('path/to/your.scss')
const code = ctx.generate()
Context 同步 API 功能是残缺的，这是因为 tailwindcss 和 postcss-import 是异步的 postcss 插件，没法同步调用.
Tailwindcss Plugin
const path = require('node:path')
module.exports = {
plugins: [
require('css-to-tailwindcss-plugin/tailwindcss')({
entries: [
path.resolve(__dirname, './theme-multiple.css'),
path.resolve(__dirname, './common.scss'
withOptionsWalkCSSRuleObject(cssObj, layer) {
console.log(cssObj, layer)
return cssObj
目前 @import/@use 只支持 .scss 文件
.css 文件目前Tailwindcss Plugin使用方式中不支持引入，因为 tailwindcss 和 postcss-import 都是异步的插件, 然而 tailwindcss plugin 必须是同步的!
当然, CLI 和 Nodejs Api 没有这样的限制
处理 tailwindcss theme() 方法和 @apply 指令
你必须安装 tailwindcss，然后设置 tailwindcssResolved 为 true，同时再传当前的 tailwind.config.js 路径或者内联 Config 对象.
<npm / yarn / pnpm> i -D tailwindcss
import { createContext } from 'css-to-tailwindcss-plugin'
const ctx = createContext({
tailwindcssResolved: true,
tailwindcssConfig: 'path/to/your/tailwind.config.js'
然后 theme() 方法和 @apply 会被处理。
假如 tailwindcssResolved 是 false，那么 css 里的 theme 方法会被转化成插件里的 js theme 方法，而 @apply 那些写法会被丢弃。
License
MIT License © 2023-PRESENT sonofmagic
