使用NextJS和Tailwind CS构建项目时，您的组件看起来可能粗糙且不整洁ð¥²。这是因为tailwind CSS是一个实用领先的框架，其超级大国包括您想通过CSS实现的任何事情的实用程序。

在本文中，我将迅速向您展示如何设置一个简单的文件夹结构，以整洁地组织您的尾管CSS课程，或者在使用NextJS或React-的fearderj。

我是软件工程师ð的Martins Ngene，我的目标是分享尽可能多的知识，以帮助您进行日常工作流程和学习。

设置tailwind CSS + NextJS项目

设置tailwind CSS + NextJS项目直到NextJs 13.遵循installation guide here开始。

组件案例研究

使用NavBar组件作为下面的案例研究，它看起来像是用尾风CSS构建组件：

组织尾风CSS课程

要整理上述组件中的类，我们必须使用扩展名.module.css创建一个文件。您可以将文件命名，但名称应以.module.css结尾。该文件可以存储在项目中的另一个文件夹中，但我建议您将其存储在与组件相同的文件夹中。下面是文件夹结构的图片：

在上图中，您可以看到我的组件是在index.tsx文件中称为“ navbar”的文件夹中创建的，您可以看到我的CSS模块文件名为styles.module.css。在styles.module.css中，我将复制并粘贴我的公用事业课程，并根据我之前制作的组件的各个部分给他们一个名字。因此，我的CSS模块看起来像下面的图片：

请注意，该约定类似于编写常规CSS样式，但有几件事要注意。首先，在宣布班级名称后，您必须在添加尾风CSS课程之前使用@apply。另外，请确保用半隆结束班级名称。在课程结束时添加半分析后，您可以添加常规CSS，如果您愿意，它可以正常工作。您还可以在保存文件时配置更漂亮的人，以自动为您添加分号。请查看下面的代码，以查看如何将常规CSS添加到您的尾风CSS课程中：

.container {
  @apply mx-auto lg:mx-0 w-[80%] lg:w-full h-[100vh];
  display: flex;
  align-items: center;
  justify-content: center;
}

既然我们已经分开了尾风，我们可以将模块导入到我们的组件：

从您的CSS模块（styles.module.css）导入关键字styles，然后通过使用从CSS模块导入的styles对象上的点表示法将类名添加到组件上的各个部分。例如，如果您在CSS模块中有一个名为container的类，请转到要添加的元素上的类名称属性，并从样式对象引用它：

<div className={styles.container}> Hello World </div>

如果您遵循，则应看到您的样式适用于您的网页。但是，如果您有任何问题或建议，请将它们放在下面的评论部分中，让我们讨论ð

我希望本文以一种或另一种方式为您提供帮助。关注我，了解有关Web开发和软件工程的更多文章。我还可以在LinkedIn上连接。