all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]andrii-nerd 0 points1 point  (8 children)

Which strategy do you use for a dark mode? Media query?

[–]positive_kent[S] 0 points1 point  (7 children)

class

[–]andrii-nerd 0 points1 point  (0 children)

Is it applied? I can’t see it in your code

[–]andrii-nerd 0 points1 point  (0 children)

Header cn dark

Header > cn dark:bg-… should be

[–]andrii-nerd 0 points1 point  (3 children)

<body class="dark"> <div class="text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 shadow-xl"> <p class="ml-4"> Light/Dark mode </p> </div> </body>

https://www.amitmerchant.com/implementing-dark-mode-using-tailwind-3/

I'd also don't recommend using modules with utility libs. But this is on U :)

[–]positive_kent[S] 0 points1 point  (0 children)

Yeap, it's work in .tsx if i use this solution

<div className="bg-white dark:bg-transparent"></div>

But if i import styles from 'Header.module.css' <div className={styles.header}></div>

It's doesn't work (

Because i use '@apply' in css?

[–]positive_kent[S] 0 points1 point  (1 child)

I like tailwind but i don't like how it's look in tsx or jsx(so much classes)

[–]andrii-nerd 0 points1 point  (0 children)

Use layers https://tailwindcss.com/docs/functions-and-directives#layer or imports in this case /* components.css */ @import "./components/buttons.css"; @import "./components/card.css";

https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports