“最佳实践”实际上没有用~~~~以后不再写样式了！！！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 (

      This is an example component
    
  )
}

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 元素中，直接使用 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 实现的简单例子：

   

       
Item 1
       
Item 2
       
Item 3
       
Item 4
       
Item 5
       
Item 6
    

在这个例子中：

• 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 元素：

导航栏：

按钮组：

  
    Primary
  
  
    Secondary
  
  
    Danger
  

卡片：

  
  

    
Card Title
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
      Learn More
    
  

表格：

  

    

      
Name
      
Email
      
Role
    
  
  

    

      
John Doe
      
johndoe@example.com
      
Admin
    
    

      
Jane Smith
      
janesmith@example.com
      
User