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

Question

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

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) ?

Mentori · Accepted Answer · 2022-05-19 13:26:36Z

1

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>
    //....

answered May 19, 2022 at 13:26

Mentori

4264 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Crocsx Over a year ago

this should work indeed. but it doesnt work in Nx within a library project. it does work on the app project

oviirup Over a year ago

@apply is working now but the dark mode is not working

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related