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