如何从Tailwind Utility-First CSS框架迁移到Stylify CSS
本指南是为了帮助你快速比较Tailwind实用优先CSS框架和Stylify的功能和语法，并让你了解如何从Tailwind迁移到Stylify。
简介
Tailwind是一个帮助你快速建立现代网站的库，而无需离开你的HTML。它是一个实用至上的CSS框架，包含了诸如flex、pt-4、text-center和rotate-90等类，可以直接在你的标记中组成任何设计。
Stylify CSS是一个库，它使用原生的类似于CSS的选择器color:blue, width:640px, margin:0_auto以及变量、组件、自定义选择器来根据你编写的内容动态生成优化的CSS。
选择器和CSS工具
Tailwind为颜色、间距、排版、可见性等属性提供了很多灵活的CSS工具：
<div class="
bg-slate-100
rounded-xl
p-8
top-[117px]
md:flex
"></div>
Stylify使用类似CSS的工具，可以直接在class属性中使用。默认情况下没有捷径，选择器不能包含空格，因为要进一步优化:
<div class="
color:blue
font-weight:bold
md:color:red
md&&landscape:font-size:32px
minw123px:font-size:123px
"></div>当一些选择器有相同的伪类甚至是媒体查询时，你可以像这样分组:
<div class="
hover:{color:blue;text-decoration:underline}
md:hover:{transform:scale(1.1);left:4px}
"></div>全局选择器
当你想在Tailwind中选择例如子元素时，你可以使用任意的变体来实现：
<div class="
[&>*]:underline
[&>p]:mt-0
"></div>Stylify提供了自定义选择器，您可以用它来对元素进行全局样式。这些选择器可以直接在类属性中定义，或在全局配置中定义，或在文件中使用内容选项。
使用class属性的例子:
<div class="[.button_.icon]{font-size:14px}">
<button class="
[.icon]{color:#fff;border-radius:12px}
[&+button]{margin-left:24px}
">
<i class="icon"></i>
</button>
<button></button>
<div>类属性中的语法模式看起来像这样:
[css selectors]{stylify selectors split by ;}在CSS和Stylify的选择器中，_（下划线）被用来代替空格，&字符总是指的是当前元素。
同样的代码，但在全局配置中会是这样的:
const compilerConfig = {
customSelectors: {
'.buttons-wrapper .button .icon': 'font-size:14px',
'.button': `
.icon { color:#fff border-radius:12px }
& + button { margin-left:24px }
`,
}
}当在全局配置中通过内容选项定义`customSelectors`时，该语法让你使用嵌套功能。&字符指的是像SCSS中的上层。
全局配置的用法:
<div class="buttons-wrapper">
<button class="button">
<i class="icon"></i>
</button>
<button></button>
<div>组件
Tailwind中的组件可以使用@apply规则来定义。同时，它们也可以被嵌套到CSS层中：
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white;
}
}Tailwind在其网站上也提供了很多复制&粘贴的组件。
Stylify默认没有提供任何预定义的CSS组件。但是，它提供了两种方法来定义它们，并且有一套复制和粘贴的无头组件，您可以在您的项目中使用。
组件可以在文件（使用内容选项）中配置，在使用它们的地方，或者在$projectConfig中全局配置。
以文件内的配置为例。stylify-components之间的内容期待没有周围括号的javascript对象:
<!--
stylify-components
title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>全局编译器配置中的例子:
const compilerConfig = {
components: {
title: 'color:blue font-weight:bold md:color:red'
}
};使用方法:
<h1 class="title"></h1>当定义组件时，你也可以像在SCSS中那样使用嵌套语法。这在全局配置和内容选项中都适用。:
const compilerConfig = {
components: {
button: `
color:black font-weight:bold
&:hover { color:grey }
&--red {
color:red
&:hover { color: darkred }
}
`
}
};配置、定制和变量
Tailwind可以通过扩展/覆盖现有的主题在一个配置文件中进行配置：
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
'blue': '#1fb6ff',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
}在Stylify中，没有类似 "主题 "的东西，也没有$projectConfig中的扩展部分。只有变量。
变量在Stylify中可以通过两种方式定义。在全局配置中或在一个文件中，通过内容选项使用。
全局配置的例子:
const compilerConfig = {
variables: {
primary: '#000',
secondary: '#eee',
titleFontSize: '24px',
shadow: '0 2px 3px #000'
}
}变量也可以根据媒体查询来定义:
const compilerConfig = {
variables: {
dark: { blue: 'lightblue' },
md: { fontSize: 24px },
'minw640px': { fontSize: 32px },
// When screen is not found, it falls back to a random custom selector
'.dark': { blue: 'lightblue' },
':root[data-theme="dark"]': { blue: 'lightblue' }
}
}使用内容选项的例子:
<!--
stylify-variables
primary: '#000',
secondary: '#eee'
titleFontSize: '24px',
shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>
