Vue中使用tailwindcss

一、下载tailwindcss

npm install tailwindcss

二、引入tailwindcss

• 创建样式文件夹,或在现有文件夹引入,例如style/index.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

• 然后引入main.js

import './styles/index.css'

三、初始化

npx tailwind init

• 这时会生成tailwind.config.js和postcss.config.js,然后在根目录创建vue.config.js配置文件

module.exports = {
 
    css: {
        loaderOptions: {
          postcss: {
            plugins: [require('tailwindcss'), require('autoprefixer')]
          }
        }
    }
  }

四、运行代码

• npm run serve运行代码,如果报等级太高的错误,就删除调低

假设以下错误

PostCSS plugin tailwindcss requires PostCSS 8.

解决方法

# 删除原来安装的包
npm uninstall tailwindcss postcss autoprefixer
# 安装低版本包
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

五、vsCode中安装插件

Tailwind CSS IntelliSense

六、尝试书写代码

 <div class="h-8 bg-green-200 text-yellow-500">山竹</div>