知食记
搜索
K

vue-cli 项目添加 tailwind.css

最近在尝试工具类思想设计的 CSS 库 tailwind.css,简单记录一下怎么在 vue-cli 工程中引入 tailwind.css。

1. 安装 tailwind

# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss

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

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

3. 配置 PostCSS

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

4. 把 tailwind 引入工程

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