安装
最后更新于：2022-04-02 03:17:05
[TOC]
## 安装
> 注意:
如果idea 因为文件太大无法只能感知 "帮助->编辑自定义属性"添加 "idea.max.intellisense.filesize=2900"
### 方式一:通过 CDN 来使用 Tailwind
```
```
### 方式二:不依赖 PostCSS 使用 Tailwind
1. 在 src下添加自动以的css(如没有自定义css,可不生成)
```
/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
.btn {
@apply px-4 py-2 bg-blue-600 text-white rounded;
}
@tailwind utilities;
```
2. 在根节点执行
```
npx tailwindcss-cli@latest init
```
会在根节点生成 tailwind.config.js
可对 tailwind.config.js 进行一下自定义操作,如
```
module.exports = {
purge: { // 过滤不需要的 css 类
enabled: true,
content: [
'./src/**/*.html',
'./src/*.html'
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
```
3. 生成 css
```
npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css
```
4. 压缩 ss
```
npx clean-css-cli@latest -o ./dist/tailwind.min.css ./dist/tailwind.css
// 自定义的 css 在单独生成一个 css 文件
npx clean-css-cli@latest o ./dist/app.css src/css/common.css src/css/index.css
```
### 方式三:以 PostCSS 插件的形式安装 Tailwind CSS
用 vue ,racket 时使用
';