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

2023-12-25 13:15:16

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-1sanimate-300ms
  2. 动画类型

    • animate-none:无动画
    • animate-spin:旋转动画
    • animate-ping:脉冲动画
    • animate-pulse:脉动动画
    • animate-bounce:弹跳动画
  3. 动画延迟

    • animate-delay-{duration}:设置动画延迟,如?animate-delay-2sanimate-delay-500ms
  4. 动画重复

    • animate-repeat-none:不重复动画
    • animate-repeat-x:水平重复动画
    • animate-repeat-y:垂直重复动画
    • animate-repeat:双向重复动画
    • animate-repeat-{number}:指定重复次数,如?animate-repeat-3
  5. 动画方向(用于 animate-slideanimate-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>

文章来源:https://blog.csdn.net/zrc_xiaoguo/article/details/135190641
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。