知食记
搜索文档…
vue-cli 项目添加 tailwind.css
最近在尝试工具类思想设计的 CSS 库 tailwind.css,简单记录一下怎么在 vue-cli 工程中引入 tailwind.css。

1. 安装 tailwind

1
# Using npm
2
npm install tailwindcss
3
4
# Using Yarn
5
yarn add tailwindcss
Copied!

2. 创建 tailwind 配置文件(可选)

如果你希望定制化tailwind.css, 可以试着引入 tailwind 的配置文件
1
npx tailwindcss init
Copied!
这会在你的工程根目录创建一个最小的tailwind.config.js
1
// tailwind.config.js
2
module.exports = {
3
theme: {
4
extend: {},
5
},
6
variants: {},
7
plugins: [],
8
}
Copied!

3. 配置 PostCSS

你需要添加PostCSS 选项来让tailwind.css 跑起来
1
module.exports = {
2
plugins: {
3
tailwindcss: {},
4
autoprefixer: {}
5
}
6
}
Copied!
请在你的工程根目录引入如上所示配置,并命名为postcss.config.js

4. 把 tailwind 引入工程

现在可以创建一个 CSS 文件在 src/assets/css/styles.css 并添加
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
Copied!
接着在 main.js 中导入到 vue 工程中
1
import '@/assets/css/style.css'
Copied!
一切顺利的话,你的Vue功能就能使用 tailwind.css 了。以上。