很火的CSS框架

安装 - TailwindCSS中文文档 | TailwindCSS中文网

特性

Mobile first

常用属性

自定义设置值

在tailwind.config.js文件中,由于 Tailwind 是一个用于构建定制用户界面的框架，因此在设计之初就考虑到了定制化。

默认情况下，Tailwind会在项目根目录下查找一个可选的 tailwind.config.js 文件，您可以在其中定义任何自定义内容。

1

npx tailwindcss init

1
2
3
4
5
6
7
8
9

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

Customizing Colors - TailwindCSS中文文档 | TailwindCSS中文网

重用

Reusing Styles - TailwindCSS中文文档 | TailwindCSS中文网

一般使用两种方法,一种使用@layer和@apply,另一种使用react或者vue框架定义component.