Dark and light mode support has been a recent trend due to the impact on our eyesight caused by the time spent on devices. With Tailwind CSS and the proper Nuxt.js (Nuxt) modules, we can easily enable this feature, with the ability to customize each mode’s look and feel to your taste.

由于在设备上花费的时间对我们的视力造成了影响，因此对明暗模式的支持已成为最近的趋势。 借助Tailwind CSS和适当的Nuxt.js (Nuxt)模块，我们可以轻松启用此功能，并能够根据您的喜好自定义每种模式的外观。

TL; DR (TL;DR)

In short, you follow the simple steps below to enable dark/light mode with Tailwind CSS and the Nuxt color mode module:

简而言之，您可以按照以下简单步骤使用Tailwind CSS和Nuxt颜色模式模块启用暗/亮模式：

• Install a Nuxt project using yarn create nuxt-app <project-name> and choose Tailwind CSS as a UI framework from the configuration selection. In case of an existing Nuxt project, run yarn add --dev @nuxtjs/tailwindcss and add the module @nuxtjs/tailwindcss to the list of buildModules in nuxt.config.js.

  使用yarn create nuxt-app <project-name>安装Nuxt项目，然后从配置选择中选择Tailwind CSS作为UI框架。 如果现有Nuxt项目，请运行yarn add --dev @nuxtjs/tailwindcss并将模块@nuxtjs/tailwindcss添加到buildModules中的nuxt.config.js列表中。

• Install tailwindcss-dark-mode and @nuxtjs/color-mode.

  安装@nuxtjs/color-mode tailwindcss-dark-mode和@nuxtjs/color-mode 。

• Declare the use of tailwindcss-dark-mode as a plugin in the collection of plugins in tailwind.config.js. Do the same with @nuxtjs/color-mode by adding require('tailwindcss-dark-mode')() to the collection of plugins in nuxt.config.js.

  声明使用的tailwindcss-dark-mode的集合中的一个插件， plugins在tailwind.config.js 。 通过在nuxt.config.js的plugins集合中添加require('tailwindcss-dark-mode')()来对@nuxtjs/color-mode进行相同的nuxt.config.js 。

• Declare the use of dark mode variants per CSS utilities in the variants field in tailwind.config.js.

  在tailwind.config.js中的variants字段中声明每个CSS实用工具使用深色模式变variants 。

• Start assigning dark mode styles for elements using generated classes with syntax ${dark-mode-variant}:${normal-generated-class-for-css-property}.

  开始使用语法${dark-mode-variant}:${normal-generated-class-for-css-property}生成类为元素分配暗模式样式。

Too short to understand? Let’s go through slowly, shall we?

太短了以至于无法理解？ 让我们慢慢来吧？

什么是Nuxt.js？ (What Is Nuxt.js?)

Nuxt.js — or Nuxt for short — is a server-side rendering (SSR) framework based on Vue.js, and it offers developers:

Nuxt.js(简称为Nuxt)是基于Vue.js的服务器端渲染(SSR)框架，它为开发人员提供：

• Flexibility — With a single codebase, developers have three build options to output their application, such as universal (pure SSR), single-page application (SPA), and static sites.
  灵活性-使用单个代码库，开发人员可以使用三种构建选项来输出其应用程序，例如通用(纯SSR)，单页应用程序(SPA)和静态站点。
• Organized code structure — A Nuxt app template comes with logical folder structures with a built-in router mechanism.
  有组织的代码结构-Nuxt应用程序模板带有带有内置路由器机制的逻辑文件夹结构。
• Performance optimization — It has auto-code-splitting per page, keeping JavaScript bundled size relatively small for faster delivery.
  性能优化-它具有每页自动代码拆分功能，可将JavaScript绑定大小保持相对较小，以便更快地交付。

Also, Nuxt is surrounded by a well-maintained ecosystem — the Nuxt community, which provides lots of practical modules, plugins, and support to simplify the development process.

此外，Nuxt周围还有一个维护良好的生态系统-Nuxt社区，该社区提供了许多实用的模块，插件和支持，以简化开发过程。

什么是Tailwind CSS？ (What Is Tailwind CSS?)

Tailwind CSS is a very efficient utility-first CSS framework. It offers developers a set of ready classes for different CSS utility properties, such as margin, padding, and font-size for styling.

Tailwind CSS是一个非常有效的实用程序优先CSS框架。 它为开发人员提供了一组用于不同CSS实用程序属性的就绪类，例如margin ， padding和font-size用于样式设置。

For example, to make the button above, it’s enough to apply the available classes accordingly:

例如，要使按钮上方，足以相应地应用可用的类：

<button
 class="py-2 px-3 bg-green-500 rounded shadow-md text-white uppercase"
>
Button
</button>

In which:

其中：

• py-—prefix for styles applied to padding-top and padding-bottom, similarly with px- for setting padding-left and padding-right properties

  py-适用于padding-top和padding-bottom样式的前缀，与px-类似，用于设置padding-left和padding-right属性

• bg- — prefer for background, followed by a color palette

  bg-偏爱background ，后跟调色板

• rounded—set the value of border-radius

  rounded -设置border-radius的值

• shadow — —prefix for box-shadow

  shadow — box-shadow前缀

• text-—prefix for any text-related CSS properties (font-size and color), like text-white for setting the color to white

  text-任何与文本相关CSS属性( font-size和color )的前缀，例如text-white用于将color设置为white

We can also combine different classes to create a custom class, such as the .btn class from the classes used in the example above. The significant advantage of Tailwind CSS is that it allows developers to write less (and less repetitive) CSS code for utilities, and hence keep the overall design consistent, with @apply.

我们还可以组合不同的类来创建自定义类，例如上例中使用的类中的.btn类。 Tailwind CSS的显着优势在于，它允许开发人员为实用程序编写更少(和更少重复)CSS代码，从而使总体设计与@apply保持一致。

.btn {
       
  @apply py-2 px-3 bg-green-500 rounded-md shadow-md text-white uppercase;
}

Tailwind CSS will generate the related styles into a single rule set for the .btn class selector, as seen in the browser:

Tailwind CSS会将相关样式生成为.btn类选择器的单个规则集，如浏览器所示：

By using PurgeCSS in the back, Tailwind CSS offers the ability to remove unused classes in our application and thus optimize the size of CSS ne