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

文章目录

• • 一、装包
  • 二、初始化
  • • • 2.1 终端执行如下命令
      • 2.2 postcss.config.js 文件中
      • 2.3 tailwind.config.js 文件中
  • 三、样式文件
  • • • 3.1 新建 tailwind.css 文件
      • 3.2 main.ts 中引入
  • 四、使用
  • • • 4.1 写入类名即可
      • 4.2 简单讲解
  • 五、插件
  • • • 5.1 安装 Tailwind CSS IntelliSense
      • 5.2 使用效果
  • 六、点赞收藏不迷路

一、装包

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)"
      }
    }
  }
};

三、样式文件

3.1 新建 tailwind.css 文件

3.2 main.ts 中引入

注：一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题

import "./style/tailwind.css";

四、使用

4.1 写入类名即可

4.2 简单讲解

• mt-10: margin-top: 2.5rem / margin-top: 40px
• pl-4: padding-left: 1rem / padding-top 16px
• bg-white: background-color: rgb(255 255 255 / var(–tw-bg-opacity));

五、插件

5.1 安装 Tailwind CSS IntelliSense

VsCode中可安装插件 Tailwind CSS IntelliSense ，帮助我们查看类名样式

5.2 使用效果

六、点赞收藏不迷路

系列文章链接：Vue3+Ts+Vite项目(目录篇)——如何从零到一搭建Vue3后台管理系统