[TOC] ## 安装 > 注意: 如果idea 因为文件太大无法只能感知 "帮助->编辑自定义属性"添加 "idea.max.intellisense.filesize=2900" ### 方式一:通过 CDN 来使用 Tailwind ``` <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> ``` ### 方式二:不依赖 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 时使用