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

tailwindcss在vue2中安装配置流程

article 2024/11/14 11:22:57

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>