使用Tailwind CSS

Tailwind css 可以让你快速构建自定义的用户界面，而不需要编写任何 CSS。
而且它支持定制化，这篇文章会先介绍基本使用方法，然后介绍如何定制化。

一、安装

建议同时安装PostCss（PostCSS 可以通过插件机制来实现各种 CSS 处理任务，比如插件autoprefixer可以添加浏览器前缀，还有其他插件可以实现转换、优化和压缩 CSS 代码。）

1
2


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

二、设置config文件

init 命令可以初始化tailwind config文件。打开配置文件，

content里加上你需要处理的文件
例如：

1
2
3
4
5


content: [
  "./src/**/*.{html,js}",
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
],

在theme的colors中可以修改预定义的颜色的值，比如：

1
2
3
4
5


theme: {
  colors: {
    green: "#49e659"
  }
}

之后所有用green的地方都会修改为这个颜色值。

但是直接修改的theme中的colors会用当前的配置覆盖Tailwind默认的配置，如果只是想要扩展颜色，可以在extend中添加colors。
同时也可以修改指定颜色和参数对应的颜色值

1
2
3
4
5


colors: {
  green: {
    100: "#49e659"
  }
}

相似的在theme中还有fontFamily、spacing、borderRadius等字段可以修改Tailwind预设的值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


screens: {
  sm: "480px",
  md: "768px",
  lg: "976px",
  xl: "1440px",
},
fontSize: {
  sm: "0.8rem",
  base: "1rem",
  xl: "1.25rem",
  2xl: "1.563rem",
  3xl: "1.953rem",
  4xl: "2.441rem",
  5xl: "3.052rem",
},
spacing: {
  "1": "8px",
  8xl: "96rem",
  9xl: "128rem",
},
borderRadius: {
  4xl: "2rem",
}

用法

bg-颜色-参数
text-颜色-参数