Tailwind CSS是一款功能强大的CSS框架，它的理念是提供一组可复用的CSS类，从而快速而灵活地构建用户界面。Tailwind CSS的设计思想是基于原子性，它将样式属性拆解成独立的类，并根据需要组合这些类来实现所需的样式。这种原子性的设计使得样式的定制和调整变得非常简单，同时也减少了样式文件的大小。使用Tailwind CSS，开发者可以通过简单地为HTML元素添加相应的类来定义样式，而无需编写一行额外的CSS代码。这种无需编写自定义CSS的方式大大提高了开发效率。Tailwind CSS提供了一套丰富的默认样式和组件，同时还支持自定义配置，使得开发者能够根据自己的需求来定制样式。尽管Tailwind CSS的学习曲线可能相对较 ste ep，但一旦熟悉了它的使用方法，开发者就能够以更高的效率构建灵活且易维护的界面。
“最佳实践”实际上没有用。
我曾经撰写了 数千字的文章 来解释为什么传统的“语义化命名”是 CSS 很难维护的原因， 但现实是，在你真正遇到问题之前你是永远不会相信我的。如果你 能忍住放弃的冲动来尝试这个框架的话，我相信 你会后悔自己为什么曾经用其他的方式写 CSS。
先看官网吧，不看永远不知道优缺点在哪里：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
如果在create-next-app时没有选择启用Tailwind CSS，则需要手动安装配置：
要在Next.js中使用Tailwind CSS，首先需要确保已经安装了Tailwind CSS和PostCSS。可以使用npm或yarn进行安装：
在项目根目录下运行以下命令来安装Tailwind CSS和PostCSS：
npm install tailwindcss postcss autoprefixer
或
yarn add tailwindcss postcss autoprefixer
接下来，需要在项目根目录下创建一个postcss.config.js文件，并添加以下内容：
module.exports = {
plugins: [
'tailwindcss',
'autoprefixer',
],
}
然后，在项目根目录下创建一个tailwind.config.js文件，并添加以下内容：
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
这里的purge选项告诉Tailwind CSS要扫描哪些文件来移除未使用的CSS类。根据你的项目结构，可以根据需要进行调整。
现在，可以在Next.js的pages/_app.js文件中导入和使用Tailwind CSS。你需要在文件顶部导入Tailwind CSS的样式表：
import 'tailwindcss/tailwind.css'
现在，就可以在项目中使用Tailwind CSS了。可以在组件中使用Tailwind CSS提供的类名来快速构建样式：
import React from 'react'
const ExampleComponent = () => {
return (
<div className="bg-blue-500 text-white p-4">
This is an example component
</div>
)
}
export default ExampleComponent
这就是在Next.js中使用Tailwind CSS的基本步骤和配置示例。你可以根据自己的需要调整和扩展Tailwind CSS的配置，以及使用更多的样式类和功能。
如果在create-next-app时选择了启用Tailwind CSS，则可直接上手使用了
配置文件，一般在next.js项目根目录下tailwind.config.ts或者tailwind.config.js，根据是否启用typescript相关
tailwind.config.ts基本配置，同样可在这里面添加自己的配置和插件：
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}
export default config
组件中使用
在项目中配置好后只需要管在css文件中编辑自己的global基础样式就行，其他的样式直接引用就行。next项目中，一般将基础样式文件直接引入到layout或page文件中，其他的组件可直接在组件对应元素中写样式class就行。
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
这里才是开始
</main>
)
}如上面这里main元素中，直接使用items-center，justify-between来应用子元素居中和居中分散对齐，其它表示方法也很直观，英语基础好的应该比较习惯。
组件属性参考介绍：
在Tailwind CSS中，类名属性（classname）用于应用样式。下面是200个常用的Tailwind CSS类名及其说明：
container- 设置一个包含内容的容器。mx-auto- 在水平方向上自动居中元素。text-center- 文本水平居中。text-left- 文本左对齐。text-right- 文本右对齐。text-xl- 设置大号文本。text-lg- 设置较大的文本。text-md- 设置中等大小的文本。text-sm- 设置较小的文本。text-xs- 设置最小的文本。text-gray-900- 设置文本颜色为深灰色。text-gray-500- 设置文本颜色为中灰色。text-gray-100- 设置文本颜色为浅灰色。font-bold- 设置文本为粗体。font-normal- 设置文本为正常字体。font-semibold- 设置文本为半粗体。font-light- 设置文本为轻字体。text-red-500- 设置文本颜色为红色。text-blue-500- 设置文本颜色为蓝色。text-green-500- 设置文本颜色为绿色。text-yellow-500- 设置文本颜色为黄色。bg-red-500- 设置背景颜色为红色。bg-blue-500- 设置背景颜色为蓝色。bg-green-500- 设置背景颜色为绿色。bg-yellow-500- 设置背景颜色为黄色。p-2- 设置内边距为2个间距单位。p-4- 设置内边距为4个间距单位。p-6- 设置内边距为6个间距单位。m-2- 设置外边距为2个间距单位。m-4- 设置外边距为4个间距单位。m-6- 设置外边距为6个间距单位。w-full- 设置宽度为100%。h-full- 设置高度为100%。w-1/2- 设置宽度为50%。h-1/2- 设置高度为50%。w-1/3- 设置宽度为33.33%。h-1/3- 设置高度为33.33%。w-2/3- 设置宽度为66.66%。h-2/3- 设置高度为66.66%。w-1/4- 设置宽度为25%。h-1/4- 设置高度为25%。w-3/4- 设置宽度为75%。h-3/4- 设置高度为75%。w-auto- 设置宽度为自动。h-auto- 设置高度为自动。flex- 设置元素为弹性布局。flex-row- 设置弹性布局为行方向。flex-col- 设置弹性布局为列方向。justify-start- 设置弹性布局的主轴对齐方式为起始位置。justify-end- 设置弹性布局的主轴对齐方式为结束位置。justify-center- 设置弹性布局的主轴对齐方式为居中。justify-between- 设置弹性布局的主轴对齐方式为两端对齐。justify-around- 设置弹性布局的主轴对齐方式为均匀对齐。items-start- 设置弹性布局的交叉轴对齐方式为起始位置。items-end- 设置弹性布局的交叉轴对齐方式为结束位置。items-center- 设置弹性布局的交叉轴对齐方式为居中。items-stretch- 设置弹性布局的交叉轴对齐方式为拉伸。self-start- 设置弹性布局的自身对齐方式为起始位置。self-end- 设置弹性布局的自身对齐方式为结束位置。self-center- 设置弹性布局的自身对齐方式为居中。self-stretch- 设置弹性布局的自身对齐方式为拉伸。border- 设置元素的边框。border-solid- 设置元素的边框样式为实线。border-dashed- 设置元素的边框样式为虚线。border-dotted- 设置元素的边框样式为点线。border-0- 设置元素的边框宽度为0。border-2- 设置元素的边框宽度为2个间距单位。rounded- 设置元素的边框为圆角。rounded-sm- 设置元素的边框为小圆角。rounded-lg- 设置元素的边框为大圆角。shadow- 设置元素的阴影效果。shadow-sm- 设置元素的小阴影效果。shadow-lg- 设置元素的大阴影效果。opacity-100- 设置元素的不透明度为100%。opacity-75- 设置元素的不透明度为75%。opacity-50- 设置元素的不透明度为50%。opacity-25- 设置元素的不透明度为25%。invisible- 设置元素不可见。visible- 设置元素可见。overflow-hidden- 设置元素的内容溢出隐藏。overflow-auto- 设置元素的内容溢出自动滚动。truncate- 设置元素的文本溢出省略。flex-grow- 设置弹性布局项的扩展比例为1。flex-shrink- 设置弹性布局项的收缩比例为1。flex-initial- 设置弹性布局项的初始缩放比例。flex-none- 禁止弹性布局项的缩放。order-1- 设置弹性布局项的排序顺序为1。order-2- 设置弹性布局项的排序顺序为2。order-3- 设置弹性布局项的排序顺序为3。order-4- 设置弹性布局项的排序顺序为4。order-5- 设置弹性布局项的排序顺序为5。order-6- 设置弹性布局项的排序顺序为6。cursor-pointer- 设置光标为手型。cursor-default- 设置光标为默认样式。cursor-not-allowed- 设置光标为不允许点击样式。hover:bg-gray-100- 在鼠标悬停时设置背景颜色为浅灰色。hover:text-red-500- 在鼠标悬停时设置文本颜色为红色。hover:border-blue-500- 在鼠标悬停时设置
动画样式及其说明：
-
动画速度：
animate-slow：慢速动画（默认持续时间 2 秒）animate-fast：快速动画（默认持续时间 0.5 秒）animate-{duration}：自定义动画持续时间，如animate-1s、animate-300ms
-
动画类型：
animate-none：无动画animate-spin：旋转动画animate-ping：脉冲动画animate-pulse：脉动动画animate-bounce：弹跳动画
-
动画延迟：
animate-delay-{duration}：设置动画延迟，如animate-delay-2s、animate-delay-500ms
-
动画重复：
animate-repeat-none：不重复动画animate-repeat-x：水平重复动画animate-repeat-y：垂直重复动画animate-repeat：双向重复动画animate-repeat-{number}：指定重复次数，如animate-repeat-3
-
动画方向（用于
animate-slide和animate-fade）：animate-left：从左侧进入/退出animate-right：从右侧进入/退出animate-top：从顶部进入/退出animate-bottom：从底部进入/退出
-
特定动画：
animate-slide：滑动动画animate-fade：淡入/淡出动画animate-zoom：缩放动画
使用 Flexbox 或 Grid 布局来实现瀑布流效果
以下是一个使用 Flexbox 实现的简单例子：
<div className="container mx-auto">
<div className="flex flex-wrap justify-center gap-2">
<div className="w-1/3 p-4 mb-8 bg-gray-200">Item 1</div>
<div className="w-1/3 p-4 mb-8 bg-gray-200">Item 2</div>
<div className="w-1/3 p-4 mb-8 bg-gray-200">Item 3</div>
<div className="w-1/3 p-4 mb-8 bg-gray-200">Item 4</div>
<div className="w-1/3 p-4 mb-8 bg-gray-200">Item 5</div>
<div className="w-1/3 p-4 mb-8 bg-gray-200">Item 6</div>
</div>
</div>在这个例子中：
container mx-auto：将内容居中并限制其最大宽度。flex flex-wrap justify-center：使元素成为一个 Flex 容器，并允许其子元素换行（wrap），同时将其水平居中（justify-center）。w-1/3：设置每个项目的宽度为父容器的三分之一。p-4：为每个项目添加内边距（padding）。mb-8：为每个项目添加下边距（margin-bottom），以创建垂直间距。bg-gray-200：为每个项目添加一个灰色背景。
其它的大家一定要常打开官网了解了解样式名称对应的属性变化，这样更加得心应手
经典应用
Tailwind CSS 是一个高度可定制的 CSS 框架，可以在应用程序中使用多个 class 来构建 UI 组件。
以下是一些经典且漂亮的应用案例，展示了如何使用 Tailwind CSS 的 class 来创建各种 UI 元素：
导航栏：
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8" src="logo.svg" alt="Logo">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
</div>
</div>
</nav>
按钮组：
<div class="space-x-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Primary
</button>
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
Secondary
</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Danger
</button>
</div>
卡片：
<div class="shadow-md rounded-lg overflow-hidden bg-white">
<img class="h-48 w-full object-cover" src="image.jpg" alt="Image">
<div class="p-4">
<h3 class="text-xl font-semibold">Card Title</h3>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Learn More
</button>
</div>
</div>
表格：
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">John Doe</td>
<td class="px-6 py-4 whitespace-nowrap">johndoe@example.com</td>
<td class="px-6 py-4 whitespace-nowrap">Admin</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap">janesmith@example.com</td>
<td class="px-6 py-4 whitespace-nowrap">User</td>
</tr>
</tbody>
</table>
