I've been using Tailwind CSS in my React/Next.js project and have noticed that my code has become less maintainable compared to when I used traditional CSS or styled-components. In the past, I could easily centralize style changes, but now, I find myself repeating classes for similar styling, like this:

我一直在我的React/Next.js项目中使用TailWind CSS，并注意到与使用传统的CSS或样式组件相比，我的代码变得更难维护了。在过去，我可以很容易地集中样式更改，但现在，我发现自己重复类似样式的类，如下所示：

<div>
  <p className='text-[16px] text-red-700'>one</p>
  <p className='text-[16px] text-red-700'>two</p>
  <p className='text-[16px] text-red-700'>two</p>
</div>

This approach leads to code duplication and makes it harder to update styles consistently. What are the best practices for using Tailwind CSS in React/Next.js to maintain a single source of truth for styling, similar to how I used to do it with traditional CSS or styled-components?

这种方法会导致代码重复，并使一致地更新样式变得更加困难。在React/Next.js中使用TailWind CSS来维护单一的样式来源的最佳实践是什么，就像我过去使用传统的CSS或样式组件所做的那样？

I want to make my code cleaner and more maintainable while leveraging the power of Tailwind CSS. Any advice or examples would be greatly appreciated. Thanks!

我想让我的代码更干净，更易维护，同时利用TailWind CSS的强大功能。任何建议或例子都将不胜感激。谢谢!

Tailwind can be made DRY with class-variance-authority (cva). More about cva here.
cva lets you create different variants of a component according to your use case. For example:

顺风可以用类-方差-权值(CVA)来干燥。有关CVA的更多信息，请点击此处。CVA允许您根据您的用例创建组件的不同变体。例如：

import {cva} from "class-variance-authority"

const para = cva(
    ["flex items-center"],
    {
      variants: {
        variant: {
          default: " text-gray-700 ",
          error: " text-red-700 ",
          success: " text-green-700 ",
        },
        size: {
          default: " text-[12px] ",
          md: " text-[14px] ",
          lg: " text-[16px] ",
        },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
);


...


para()
// "flex items-center text-gray-700 text-[12px]"

para({variant: "error", size: "md"});
// "flex items-center text-red-700 text-[14px]"

You can add other variants like border, shadow, etc. according to your use case. Also look for clsx and tailwind-merge in combination with cva for further drying up your components with tailwind CSS and React/Next js.

您可以根据您的用例添加其他变体，如边框、阴影等。另外，还可以使用clsx和顺风合并与CVA相结合，以使用顺风css和Reaction/Next js进一步干涸您的组件。

I think I understand the feeling.

我想我理解这种感觉。

I see have 2 simple solutions:

我看到有两个简单的解决方案：

1. As you use React, if they are repeating elements in your code, with the same classes all the time. Create a component, in that case, it could be something like const Paragraph = (text) => {text}

Or,

或,

2. Using Tailwind @apply. If you like creating your own CSS classes, this will feel more natural to you.

In your CSS file:

在您的css文件中：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
   .p-custom {
     @apply text-[16px] text-red-700;
   }
}

Check this
https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

检查此https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

And this
https://tailwindcss.com/docs/functions-and-directives#layer

而这个https://tailwindcss.com/docs/functions-and-directives#layer

Hope it helps

希望能有所帮助

You can checkout the official page of Tailwindcss LINK

您可以查看Tailwincss链接的官方页面

OR

或

Try This:

试试这个：

You can use .map() function to iterate the the values.

您可以使用.map()函数来迭代值。

const classes = "text-[16px] text-red-700";

const arr = ["one", "two", "three"];
<div>
{
arr.map(text=> (
<p className={classes} key={text} >{text}</p>
 ))
}
</div>