“最佳实践”实际上没有用~~~~以后不再写样式了！！！Next.js中使用Tailwind CSS的详细配置和具体使用方法，以及部分样式使用参考

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类名及其说明：

1. container - 设置一个包含内容的容器。
2. mx-auto - 在水平方向上自动居中元素。
3. text-center - 文本水平居中。
4. text-left - 文本左对齐。
5. text-right - 文本右对齐。
6. text-xl - 设置大号文本。
7. text-lg - 设置较大的文本。
8. text-md - 设置中等大小的文本。
9. text-sm - 设置较小的文本。
10. text-xs - 设置最小的文本。
11. text-gray-900 - 设置文本颜色为深灰色。
12. text-gray-500 - 设置文本颜色为中灰色。
13. text-gray-100 - 设置文本颜色为浅灰色。
14. font-bold - 设置文本为粗体。
15. font-normal - 设置文本为正常字体。
16. font-semibold - 设置文本为半粗体。
17. font-light - 设置文本为轻字体。
18. text-red-500 - 设置文本颜色为红色。
19. text-blue-500 - 设置文本颜色为蓝色。
20. text-green-500 - 设置文本颜色为绿色。
21. text-yellow-500 - 设置文本颜色为黄色。
22. bg-red-500 - 设置背景颜色为红色。
23. bg-blue-500 - 设置背景颜色为蓝色。
24. bg-green-500 - 设置背景颜色为绿色。
25. bg-yellow-500 - 设置背景颜色为黄色。
26. p-2 - 设置内边距为2个间距单位。
27. p-4 - 设置内边距为4个间距单位。
28. p-6 - 设置内边距为6个间距单位。
29. m-2 - 设置外边距为2个间距单位。
30. m-4 - 设置外边距为4个间距单位。
31. m-6 - 设置外边距为6个间距单位。
32. w-full - 设置宽度为100%。
33. h-full - 设置高度为100%。
34. w-1/2 - 设置宽度为50%。
35. h-1/2 - 设置高度为50%。
36. w-1/3 - 设置宽度为33.33%。
37. h-1/3 - 设置高度为33.33%。
38. w-2/3 - 设置宽度为66.66%。
39. h-2/3 - 设置高度为66.66%。
40. w-1/4 - 设置宽度为25%。
41. h-1/4 - 设置高度为25%。
42. w-3/4 - 设置宽度为75%。
43. h-3/4 - 设置高度为75%。
44. w-auto - 设置宽度为自动。
45. h-auto - 设置高度为自动。
46. flex - 设置元素为弹性布局。
47. flex-row - 设置弹性布局为行方向。
48. flex-col - 设置弹性布局为列方向。
49. justify-start - 设置弹性布局的主轴对齐方式为起始位置。
50. justify-end - 设置弹性布局的主轴对齐方式为结束位置。
51. justify-center - 设置弹性布局的主轴对齐方式为居中。
52. justify-between - 设置弹性布局的主轴对齐方式为两端对齐。
53. justify-around - 设置弹性布局的主轴对齐方式为均匀对齐。
54. items-start - 设置弹性布局的交叉轴对齐方式为起始位置。
55. items-end - 设置弹性布局的交叉轴对齐方式为结束位置。
56. items-center - 设置弹性布局的交叉轴对齐方式为居中。
57. items-stretch - 设置弹性布局的交叉轴对齐方式为拉伸。
58. self-start - 设置弹性布局的自身对齐方式为起始位置。
59. self-end - 设置弹性布局的自身对齐方式为结束位置。
60. self-center - 设置弹性布局的自身对齐方式为居中。
61. self-stretch - 设置弹性布局的自身对齐方式为拉伸。
62. border - 设置元素的边框。
63. border-solid - 设置元素的边框样式为实线。
64. border-dashed - 设置元素的边框样式为虚线。
65. border-dotted - 设置元素的边框样式为点线。
66. border-0 - 设置元素的边框宽度为0。
67. border-2 - 设置元素的边框宽度为2个间距单位。
68. rounded - 设置元素的边框为圆角。
69. rounded-sm - 设置元素的边框为小圆角。
70. rounded-lg - 设置元素的边框为大圆角。
71. shadow - 设置元素的阴影效果。
72. shadow-sm - 设置元素的小阴影效果。
73. shadow-lg - 设置元素的大阴影效果。
74. opacity-100 - 设置元素的不透明度为100%。
75. opacity-75 - 设置元素的不透明度为75%。
76. opacity-50 - 设置元素的不透明度为50%。
77. opacity-25 - 设置元素的不透明度为25%。
78. invisible - 设置元素不可见。
79. visible - 设置元素可见。
80. overflow-hidden - 设置元素的内容溢出隐藏。
81. overflow-auto - 设置元素的内容溢出自动滚动。
82. truncate - 设置元素的文本溢出省略。
83. flex-grow - 设置弹性布局项的扩展比例为1。
84. flex-shrink - 设置弹性布局项的收缩比例为1。
85. flex-initial - 设置弹性布局项的初始缩放比例。
86. flex-none - 禁止弹性布局项的缩放。
87. order-1 - 设置弹性布局项的排序顺序为1。
88. order-2 - 设置弹性布局项的排序顺序为2。
89. order-3 - 设置弹性布局项的排序顺序为3。
90. order-4 - 设置弹性布局项的排序顺序为4。
91. order-5 - 设置弹性布局项的排序顺序为5。
92. order-6 - 设置弹性布局项的排序顺序为6。
93. cursor-pointer - 设置光标为手型。
94. cursor-default - 设置光标为默认样式。
95. cursor-not-allowed - 设置光标为不允许点击样式。
96. hover:bg-gray-100 - 在鼠标悬停时设置背景颜色为浅灰色。
97. hover:text-red-500 - 在鼠标悬停时设置文本颜色为红色。
98. hover:border-blue-500 - 在鼠标悬停时设置

动画样式及其说明：

1. 动画速度：

   • animate-slow：慢速动画（默认持续时间 2 秒）
   • animate-fast：快速动画（默认持续时间 0.5 秒）
   • animate-{duration}：自定义动画持续时间，如 animate-1s、animate-300ms

2. 动画类型：

   • animate-none：无动画
   • animate-spin：旋转动画
   • animate-ping：脉冲动画
   • animate-pulse：脉动动画
   • animate-bounce：弹跳动画

3. 动画延迟：

   • animate-delay-{duration}：设置动画延迟，如 animate-delay-2s、animate-delay-500ms

4. 动画重复：

   • animate-repeat-none：不重复动画
   • animate-repeat-x：水平重复动画
   • animate-repeat-y：垂直重复动画
   • animate-repeat：双向重复动画
   • animate-repeat-{number}：指定重复次数，如 animate-repeat-3

5. 动画方向（用于 animate-slide 和 animate-fade）：

   • animate-left：从左侧进入/退出
   • animate-right：从右侧进入/退出
   • animate-top：从顶部进入/退出
   • animate-bottom：从底部进入/退出

6. 特定动画：

   • 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>