vue2集成tailwind.css,快速开发前台页面

时间:2024-10-13 21:29:55

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: [],
}

purge是最后打包的时候扫描src下的所有vue,js结尾文件,如果没有用到的css将清理,压缩大小

4.vue.config.js

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

  1. css:
  • 这是 Vue CLI 中的一个配置项,用于配置 CSS 相关的选项。
  1. loaderOptions:
  • 这个选项允许配置 CSS 相关加载器的选项,具体来说是 PostCSS 的配置。
  1. postcss:
  • 在这里,你指定了 PostCSS 的配置选项,PostCSS 是一个工具,用于处理 CSS 文件,可以通过插件实现各种功能。
  1. postcssOptions:
  • 这个选项用于进一步细化 PostCSS 的配置,允许你指定要使用的插件。
  1. plugins:
  • 这是一个数组,用于定义要加载的 PostCSS 插件。
  • require('tailwindcss'): 引入 Tailwind CSS 插件,允许使用 Tailwind CSS 的工具类和功能。
  • require('autoprefixer'): 引入 Autoprefixer 插件,自动为 CSS 添加浏览器前缀,以确保在不同浏览器中的兼容性。

作用

通过这段配置,你可以:

  • 集成 Tailwind CSS: 允许在项目中使用 Tailwind CSS 的功能和类。
  • 自动添加前缀: 使用 Autoprefixer 自动处理 CSS 属性的浏览器前缀,使得样式在不同浏览器中具有更好的兼容性。

5.src下随便找个地方放样式文件,这里我就放到了src/assets/下,然后添加内容(Tailwind的指令)

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

在 Tailwind CSS 中,@ 符号用于引入特定的指令或规则。具体到 @tailwind utilities;,这个 @ 符号表示这是一个 指令,而不是普通的 CSS 规则。

详细解释

    • 指令:

    • @tailwind 是 Tailwind CSS 的一个特定指令,用于引入 Tailwind 的不同层次的样式。

    • 这个指令告诉 Tailwind CSS 在编译过程中插入相应的样式。

    utilities:

    • @tailwind utilities; 中,utilities 指的是工具类样式。这些工具类是 Tailwind CSS 中的基本组成部分,允许开发者快速应用特定的样式,如边距、填充、颜色等。
      例如mx-4 …类名决定生成样式

6.main.js引入

import '@/assets/tailwindcss.css'

7.测试

image-20241006201648042

image-20241006201659439