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.

Squeeze

You might want to rethink your strategy. Having multiple CSS files means multiple trips between the browser and server, plus gzip/brotli compression won't be as good because there will be less repetition. You're probably better building it all to one file. Also, you probably don't need purge as Tailwind now has a JIT compiler which basically does the same thing. – Xylography

I don't think I should rethink it as it is a very important feature. Is it worth having code in memory that the browser will never use unless you visit another page? This shines on large projects with highly differentiated pages. – Gaskill

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]; }

Offprint