CODEWITHSUNDEEP
htmlcssreactjstailwind-css
Crocsx
Crocsx

Reputation: 7589

Tailwind css `@apply` do not work inside a css module

I have an issue in my project.

I am using nx and react and I setup tailwind to work across all my projects/libraries.

Everything works fine.

Inside a Library, I am writing like a terms and services page, with a lot of text and I would like to style this independently of the rest of the app.

I made a styles.module.css

header h3 {
  @apply leading-11 mb-6 text-center text-2xl md:mb-10;
}

header small {
  @apply text-gray-2 mb-6 block text-center text-xs leading-9 md:mb-10;
}
/* ... */

and I import it in my page

import './styles.module.css';

export const TermsEnUs = () => (
  <div>
    <header>
      <h3>blablabla Terms of Services</h3>
      <small>Effective: 1 October 2021</small>
      <p>
        blablablablablablablablablablablablablablablablablabla
      </p>
    </header>
    <section>
      <h4>blablablablablablablablablablablabla</h4>
      <article>
    //....

I would like those style to only be applied to this component and do not pollute the rest of the app.

The problem is, tailwind/postcss do not compile this css file

enter image description here

how can I solve this ? how to make this styles only available on this page (so only header h3 inside this react component will have this styles) ?

Upvotes: 0

Views: 1389

Answers (1)

Mentori
Mentori

Reputation: 426

create-react-app

styles.module.css

.h3 {
  @apply leading-11 mb-6 text-center text-2xl md:mb-10;
}

.small {
  @apply text-gray-2 mb-6 block text-center text-xs leading-9 md:mb-10;
}

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

export const TermsEnUs = () => (
  <div>
    <header>
      <h3 className={style.h3}>blablabla Terms of Services</h3>
      <small className={style.small}>Effective: 1 October 2021</small>
      <p>
        blablablablablablablablablablablablablablablablablabla
      </p>
    </header>
    <section>
      <h4>blablablablablablablablablablablabla</h4>
      <article>
    //....

Upvotes: 1

Related Questions