当前位置：首页 > news >正文

tailwindcss在vue2中安装配置流程

news 2025/8/10 20:36:47

vue版本不一样配置也不一样

tailwindcss官网 v2
当前 node（16.17.0） vue-cli（5.0.0）

1. 安装指定依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2. 初始化配置会自动生成一个 tailwind.config.js文件

npx tailwindcss init

3. 修改tailwind.config.js 配置文件

module.exports = {purge: ["./src/*.{js,jsx,vue}",'./public/index.html'],darkMode: false,theme: {extend: {},},variants: {extend: {},},plugins: [],
}

4. vue.config.js 中添加 postcss-loader配置，以便在构建过程中使用 Tailwind CSS 和 Autoprefixer 插件对 CSS 进行处理。通过这个配置，你可以确保你的项目中的 CSS 自动适配不同浏览器，并且可以利用 Tailwind CSS 的实用类进行样式管理。

module.exports = defineConfig({transpileDependencies: true,// 其他配置css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('tailwindcss'),require('autoprefixer')]}}}}
});

5. 创建css文件，将 Tailwind 指令添加到你的 CSS

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

6. main中引入 index.css

import '@/styles/index.css'

7. 开始使用

<template><div class="home"><div class="w-20 w-3/4 bg-red-400 text-center leading-9">home</div></div>
</template><script>
export default {name: "Home",
};
</script>