tailwind CSS 是一个基于原子类的 CSS 框架，它提供了一套可复用的 CSS 类，用于快速构建现代化的用户界面。与传统的 CSS 框架不同，tailwind CSS 不依赖于预定义的组件，而是通过组合多个原子类来构建界面。
为什么要使用 tailwind
tailwind CSS 的核心理念是提供一组小而简单的 CSS 类，每个类都代表一个特定的样式属性。通过将这些类组合在一起，开发者可以轻松地构建出各种样式。
例如，要创建一个按钮，可以使用 bg-blue-500 类设置背景颜色为蓝色，使用 text-white 类设置文字颜色为白色，使用 px-4 py-2 类设置内边距等。
<button class="bg-blue-500 px-4 py-2 text-white">button</button>
与其他 CSS 框架相比，tailwind CSS 具有以下优点：
- 灵活性：tailwind CSS 提供了大量的原子类，开发者可以根据需要自由组合，而不受预定义组件的限制。
- 可定制性：tailwind CSS 允许开发者通过配置文件自定义样式属性，以适应不同的项目需求。
- 性能优化：tailwind CSS 通过使用 PurgeCSS 等工具，可以自动删除未使用的样式，从而减小 CSS 文件的大小。
- 社区支持：tailwind CSS 拥有庞大的社区，提供了大量的插件和扩展，可以进一步增强框架的功能。
如何使用 tailwind
因为 tailwind CSS 本身并不依赖于任何特定的前端框架。你只需要在项目中安装 tailwind CSS，并在你的项目中使用相应的 CSS 类即可。
安装
npm install -D tailwindcss postcss autoprefixer
初始化 tailwind 配置文件
npx tailwindcss init -p
执行完成后将会在项目根目录生成 tailwind.config.js 配置文件
我们只需要在content属性中配置哪类文件需要使用 tailwind 即可
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
引入 tailwindcss
- 在自己项目中通过 @tailwind 指令引入
@tailwind base;
@tailwind components;
@tailwind utilities;
- 在项目入口文件引入
tailwindcss/tailwind.css
import "tailwindcss/tailwind.css";
这种方式等同于上述 1
在 Vue 项目中使用
vue 项目中只需要在 tailwind.config.js 中配置 .vue 文件
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
在 vue 文件中使用
<template>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>
在 React 项目中使用
同在 vue 项目中一样，在tailwind.config.js 中配置 .jsx/tsx 文件即可
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
在 jsx 文件中使用
export default function App() {
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}
在本站使用
我引入 tailwind 的原因，是因为当我使用 flex 实现垂直水平居中时，总是会把 align-items 写成 items-center, fuck！！
由于本站基于React实现，因此按照上述步骤即使用 tailwind