tailwindcss本文来讲解总结tailwindcss的使用。其实tailwindcss本质而言就是css原子化。那

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

本文来讲解总结tailwindcss的使用。其实tailwindcss本质而言就是css原子化。那么本文首先先了解css原子化，在对tailwindcss的使用进行讲解。

css原子化

原子类CSS与我们常用的语义化CSS不同的是，框架本身为我们提供了一系列类名来表示对应的CSS规则。当我们想写一个css样式时，我们不再需要给标签一个语义化类名，然后再给类名添加CSS规则，我们只需要给标签一个框架提供的类名就行，最后在编译过程中，会自动生成对应CSS规则，这就是原子类CSS，以及它和我们常用语义化标签的不同。

css原子化优缺点：

减少了css体积，提高了css复用
减少起名的复杂度
缺点：增加了记忆成本将css拆分为原子之后，你势必要记住一些class才能书写，尽管tailwindcss提供了完善的工具链，你写background，也要记住开头是bg

了解tailwindcss

传送门：tailwindcss中文文档

正如官网所介绍的，tailwindcss是由 Tailwind CSS 的创造者们用心打造的精美 UI 组件库

tailwindcss使用

首先创建 vite + vue-ts 项目：

yarn create vite

安装 Tailwind CSS 依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

生成 tailwind 和 postcss 配置文件：

npx tailwindcss init -p

以下是tailwindcss 3.x 版本的配置文件：

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  darkMode: 'media',
  theme: {
    extend: {},
    container: {
      center: true,
    }
  },
  plugins: [],
}

接着在全局样式文件中导入tailwind

src\styles\index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src\styles\index.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

最后全局样式文件在main.ts中导入：

import './styles/index.scss'

最后可以安装VSCode插件：

安装Tailwind CSS IntelliSense 从而支持自动完成、语法高亮、悬停预览、语法分析功能。
安装PostCSS Language Support 从而支持css未知规则如tailwind中的 @tailwind、@apply、@screen。