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

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

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 文件

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

3.2 main.ts 中引入

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

import "./style/tailwind.css";

四、使用

4.1 写入类名即可

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

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项目(第十五篇)——tailwindcss安装及使用详解,css原子化如何实现_第4张图片

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


六、点赞收藏不迷路

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

你可能感兴趣的:(#,Vue3从零到一项目实战,css,前端)