new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

css-modules

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tailwind is compatible with CSS modules but not recommended together

Tailwind is compatible with CSS modules and can co-exist with them, but using CSS modules and Tailwind together is not recommended if you can avoid it.

CSS modules scoping concerns with Tailwind

CSS modules are designed to solve scoping problems that don't exist when composing utility classes in your HTML with Tailwind instead of writing custom CSS. Styles are naturally scoped with Tailwind because each utility class always does the same thing, no matter where it's used; there's no risk that adding a utility class to one part of your UI creates unexpected side effects elsewhere.

CSS modules cause slower build times with Tailwind

When using CSS modules, build tools like Vite, Parcel, and Turbopack process each CSS module separately. If you have 50 CSS modules in a project, Tailwind needs to run 50 separate times, which leads to much slower build times and a worse developer experience.

CSS modules require explicit theme context sharing

CSS modules are each processed separately and have no @theme unless you import one. Features like @apply won't work as expected unless you explicitly import your global styles as reference using @reference.

Use CSS variables instead of @apply in CSS modules

In CSS modules, you can use CSS variables instead of @apply, which has the added benefit of letting Tailwind skip processing those files and improving your build performance. For example, use background: var(--color-blue-500) instead of @apply bg-blue-500.

Give your agent this brain