【Tailwind CSS】Vue项目中配置Tailwind CSS详解

最新推荐文章于 2024-07-25 10:04:51 发布

lynnhgwang

最新推荐文章于 2024-07-25 10:04:51 发布

阅读量1.9k

点赞数

分类专栏：大前端文章标签： tailwind tailwindcss vue tailwind 环境配置

本文链接：https://blog.csdn.net/baidu_36511315/article/details/118514666

版权

大前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

记录在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

再次运行，没报错说明安装成功。