CSS框架 Tailwind CSS

---

前言

Tailwind CSS以其独特的实用类优先的设计理念和高效的开发方式，在前端开发领域得到了广泛的应用和认可。它不仅能够提高开发效率和维护性，还能够帮助开发者构建出更加美观和响应式的Web界面。

---

一、Tailwind CSS是什么？

Tailwind CSS 是一个功能类优先（Utility-First）的CSS框架，由Adam Wathan和Steve Schoger在2017年创建。它以独特的方式重新定义了样式表的编写方式，专注于提供一组小而灵活的原子类，让开发者可以根据需要组合这些原子类来构建符合设计规范的界面。以下是对Tailwind CSS的详细介绍：

二、项目中如何使用

在Vite项目中配置Tailwind CSS，主要涉及到安装Tailwind CSS、在项目中引Tailwind CSS的样式文件、以及在vite.config.js（或vite.config.ts）配置文件中设置TailwindCSS插件。以下是一个详细的配置步骤：

1.安装Tailwind CSS

首先，你需要在项目中安装Tailwind CSS及其依赖项。可以通过npm或yarn来安装：

npm install -D tailwindcss postcss autoprefixer  
# 或者  
yarn add -D tailwindcss postcss autoprefixer

这里-D参数表示将Tailwind CSS安装为开发依赖。postcss和autoprefixer是Tailwind CSS推荐的PostCSS插件，用于自动添加浏览器前缀。

2.初始化Tailwind CSS

安装完成后，你需要运行Tailwind CSS的初始化命令来生成配置文件（如tailwind.config.js，这将自动审生成一个tailwind.config.js文件，你可以在其中自定义Tailwind CSS的配置。

代码如下（示例）：

npx tailwindcss init -p

3.引入Tailwind CSS样式

1. 先创建tailwind.css

2. 引入内置样式

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

4.进行配置（tailwind.config.js）

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  // 主题色的配置，根据文档自行配置  （示例）
  theme: {
    colors: {
      blue: "#bfc",
      purple: "#7e5bef",
      pink: "#ff49db",
      orange: "#ff7849",
      green: "#13ce66",
      yellow: "#ffc82c",
      "gray-dark": "#273444",
      gray: "#8492a6",
      "gray-light": "#d3dce6",
    },
  },
  // 插件 根据官网文档自行配置
  plugins: [],
};

5.全局引入注册

6.使用Tailwind CSS

function App() {
  return (
    <h1 className="text-3xl text-blue font-bold underline">Hello world!</h1>
  );
}

export default App;

完成：

总结

在Vite项目中配置Tailwind CSS主要涉及到安装Tailwind CSS及其依赖、初始化Tailwind CSS配置、创建全局CSS文件、在入口文件中引入全局CSS，并确保Tailwind CSS的CLI命令在构建过程中运行。你通常不需要在Vite配置文件中显式添加Tailwind CSS的PostCSS插件，因为Tailwind CSS的CLI命令会处理这一切。