i have a problem in tailwind with next js
Answered
gamy22 posted this in #help-forum
Answered by American black bear
11 Replies
American black bear
TailwindCSS cannot read dynamic classes as it removes all unused classes from the bundle to make it as performant as possible
If you want to use dynamic classes you can do something like described here
Answer
gamy22OP
thanks alot
i will try it
gamy22OP
// Map cols number to Tailwind grid classes
const gridCols = {
1: "grid-cols-1",
2: "grid-cols-2",
3: "grid-cols-3",
4: "grid-cols-4",
5: "grid-cols-5",
6: "grid-cols-6",
}[cols];@gamy22 // Map cols number to Tailwind grid classes
const gridCols = {
1: "grid-cols-1",
2: "grid-cols-2",
3: "grid-cols-3",
4: "grid-cols-4",
5: "grid-cols-5",
6: "grid-cols-6",
}[cols];
Rose-breasted Grosbeak
instead of this, inline the style (in style object)
@Rose-breasted Grosbeak instead of this, inline the style (in style object)
gamy22OP
can you give me example
American black bear
<div style={{gridTemplateColumns: 3}}></div>
// or whatever the key is for grid cols@American black bear tsx
<div style={{gridTemplateColumns: 3}}></div>
// or whatever the key is for grid cols
Rose-breasted Grosbeak
gridTemplateColumns lol. forgetting CSS because of TW?@Rose-breasted Grosbeak `gridTemplateColumns` lol. forgetting CSS because of TW?
American black bear
what matters is the basics, syntax will change infinitely many times :D