How to combine CUSTOM classes with Tailwind breakpoints?

[ilyasseisov]

Hi 👋

Could you please help.
How to combine CUSTOM classes with Tailwind breakpoints?

in globals.css i defined a custom class

.test {
  background: red;
}

I need it to be applied on md:and higher.

The declaration below doesn't work.

<h3 className="md:test">text</h3>

???

Thanks in advance!

[wongjn]

https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

[ilyasseisov]

I appreciate it! 👍
But I wasn't able to find an answer to my issue in that doc :(

Maybe you can guide? 😊

[ilyasseisov]

https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

Thanks again!
I found a solution.

wrapped mu classes into @layer utilities {...}

[LucasKuhn]

Is this working with Tailwind 4? I tried your exact example, but md:test is not applying the test class 😔

[wongjn]

No, you'd use @utility in v4:

@utility test {
  …
}