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>