记录在Vue3.0以下版本的项目中手动安装tailwindcss的步骤
文章目录
- 安装 TailwindCSS
- 创建 TailwindCSS 配置文件
- 安装 PostCSS 和 autoprefixer
- 创建 PostCSS 配置文件
- 引入 TailwindCSS
- 启动本地服务
- 相关链接
安装 TailwindCSS
npm install tailwindcss
创建 TailwindCSS 配置文件
npx tailwindcss init
这一步骤会自动在根目录下创建 tailwind.config.js。
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
安装 PostCSS 和 autoprefixer
由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中，建议安装 autoprefixer 去处理这个问题。
npm install -D postcss autoprefixer
创建 PostCSS 配置文件
我们在项目根目录下手动创建postcss.config.js。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
引入 TailwindCSS
手动创建tailwindcss.css，建议在 src/assets/css 目录下面创建 。
// src/assets/css/tailwindcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;
然后在 src/main.js 文件中引入。
// src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./assets/css/tailwindcss.css";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
启动本地服务
npm ru ndev
如果报以下错误：
ERROR Failed to compile with 1 error
error in ./src/assets/css/tailwindcss.css
Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
说明 PostCSS 与 autoprefixer 的版本不兼容，卸载 autoprefixer，并重新安装上一个版本。
npm uninstall autoprefixer
npm install -D autoprefixer@^9
再次运行，没报错说明安装成功。