在 Vue 项目中安装 TailwindCSS

参考: https://tailwindchina.com/guides/installing-tailwindcss-with-vue-cli.html#%E5%88%9B%E5%BB%BA-vue-%E9%A1%B9%E7%9B%AE

#步骤一.创建 Vue 项目

vue create installing-tailwindcss-with-vue-cli

发现脚手架是低版本，不能使用’vue create’命令，遂升级脚手架

先卸载

npm uninstall -g vue-cli

再安装

npm install -g @vue/cli

升级完成后，版本为4.5.13

高版本脚手架创建项目，选择Vue 2.x

vue create installing-tailwindcss-with-vue-cli

二、安装 TailwindCSS

项目目录下，安装tailwindcss

cnpm i tailwindcss --S

三、创建 TailwindCSS 配置文件

npx tailwindcss init

项目目录下自动生成 tailwind.config.js 文件

四、安装 PostCSS 和 autoprefixer

cnpm i postcss autoprefixer --D

五、创建 PostCSS 配置文件

在项目根目录下面手动创建 postcss.config.js(与tailwind.config.js同级)

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

六、引入 TailwindCSS

1.在 src/assets 目录下面创建 tailwindcss.css

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

2.然后在 src/main.js 文件中引入刚编写的tailwindcss.css

import './assets/tailwindcss.css'

七、启动 Vue Cli 本地服务

发现使用cnpm run dev 报错，是因为升级了脚手架所以，使用

cnpm run serve

八、验证