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

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')
          ]
        }
      }
    }
  }
});

css:

这是 Vue CLI 中的一个配置项，用于配置 CSS 相关的选项。

loaderOptions:

这个选项允许配置 CSS 相关加载器的选项，具体来说是 PostCSS 的配置。

postcss:

在这里，你指定了 PostCSS 的配置选项，PostCSS 是一个工具，用于处理 CSS 文件，可以通过插件实现各种功能。

postcssOptions:

这个选项用于进一步细化 PostCSS 的配置，允许你指定要使用的插件。

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.测试

秒客网

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

作用

详细解释

相关文章