如何将tailwind css生成的代码拆分到不同的目录中？

Question

我是 tailwind-css 的新手，我想要实现的是，可以说我在 component/index.js 中使用了一些 tailwindcss 类，并且我想在组件目录中生成 tailwindcss 的 index.css 文件，例如： component/index.css 。这样我每个文件夹都会有不同的 css 文件，而不是只有一个大文件。这件事可以使用 tailwind.config.js 文件中的清除来实现吗？

Answer 1

你可以这样实现：

1. 首先我建议你将其更改为 style.module.css （以更有意义）

2. 在组件文件中导入这样的样式：

import Style from './style.module.css';

import IProps from './entities/IProps';

const Card: FC<IProps> = (props): ReactElement => (
  (
    <div className={`cardContainer ${Style.cardContainer} ${props.classes}`} data-testid="cardComponent">
      {props.children}
    </div>
  )
);

3. 你的样式文件应该是这样的：

   .cardContainer { @apply bg-[#fff] 边框圆角-[8px] pt-[14px]; }