Vue3+Ts+Vite项目(第十五篇)——tailwindcss安装及使用详解，css原子化如何实现

礼貌而已

已于 2023-11-06 15:56:45 修改

阅读量4.9k

点赞数 12

分类专栏： # Vue3从零到一项目实战文章标签： css 前端

于 2023-09-16 23:22:49 首次发布

本文链接：https://blog.csdn.net/qq_61402485/article/details/132927141

版权

Vue3从零到一项目实战专栏收录该内容

17 篇文章 58 订阅

订阅专栏

文章目录

一、装包

npm:

npm install -D tailwindcss postcss autoprefixer

pnpm :

pnpm install -D tailwindcss postcss autoprefixer

二、初始化

2.1 终端执行如下命令

npx tailwindcss init -p

在这里插入图片描述

2.2 postcss.config.js 文件中

export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
};

2.3 tailwind.config.js 文件中

注：此代码参考开源项目 vue-pure-admin

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)",
        text_color_disabled: "var(--el-text-color-disabled)"
      }
    }
  }
};