vue 使用 tailwindcss 3.0

推荐安装  tailwindcss 3.0

tailwindcss 官方地址  

        英文文档 （推荐）

        中文文档 （更新不及时）

tailwindcss 3.0 安装流程

     官方引入教程

   npm 安装 

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

 vue-cli webpack 4 升级到 webpack5

•   升级到最新版本 

// 卸载全局cli

npm uninstall @vue/cli


// 安装全局cli

npm install -g @vue/cli

•   原本的项目依赖也需要升级

// 项目中执行

vue upgrade

• 升级到 webpack5 后，修改 vue.config.js 文件

1、hotOnly：true  修改成 hot: true,

2、jsonpFunction 修改成 chunkLoadingGlobal


3、devServer 中新增（可不设置，不设置页面会有报错弹窗）
    client: {
      logging: 'none',
      overlay: false
    }

tailwindcss 引入

•   创建  postcss.config.js 文件

  • module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {}
      }
    }
    

•   创建  prettier.config.js 文件

  • module.exports = {
      plugins: [require('prettier-plugin-tailwindcss')]
    }
    

•   创建  tailwind.config.js 文件

  • /** tailwind.config.js 内容 */
    
    module.exports = {
      content: ["./src/**/*.{html,js}"],
      theme: {
        extend: {},
      },
      plugins: [],
    }

• 创建  tailwindcss.css 文件

  • @tailwind base;
    @tailwind components;
    @tailwind utilities;

• main.js 文件 引入 css 文件 

  • import './styles/tailwindcss.css'