How to split tailwind css generated code into different directories?

Question

im new to tailwind-css and what i want to achieve is that lets say im using few classes of tailwindcss in component/index.js and i want to generate index.css file of tailwindcss in component directory for eg: component/index.css. so like that i'll have different css file of every folder rather than only one big file. Is this thing achieveable using purge in tailwind.config.js file.

Answer 1

You can achieve this like that:

1. First I suggest you to change it as style.module.css (to make more sense)

2. import your styles like this inside your component file:

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. your style file should be like this:

   .cardContainer { @apply bg-[#fff] border rounded-[8px] pt-[14px]; }