Challenges encountered when using Tailwindcss and Nextjs with class and variables

Question

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs...

The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style.

This is how I need it to be:

https://i.sstatic.net/s7Xsx.png

I've attempted setting the class as a constant, both within the component and in getStaticProps, but unfortunately, neither method worked. I even tried defining a class directly in the css file, but that also didn't yield any results.

css reactjs typescript next.js classname

Answer 1

Answer №1

When using Tailwind, it employs regex to locate class names within your source code, which necessitates that they are presented as continuous strings. This means that attempting to utilize string interpolation in the manner you are trying will not work because Tailwind won't be able to identify the class name.

An alternative approach is to assign your props to static class names:

const Component = ({animal}) => {
  const animalBgVariants = {
    dog: 'bg-animaltype-dog',
    cat: 'bg-animaltype-cat',
    // ...
  }

  return (
    <div className={`[...other classes] ${animalBgVariants[animal.types[0].type.name]}`}></div>
  )
}

Answer 2

When using Tailwind, it employs regex to locate class names within your source code, which necessitates that they are presented as continuous strings. This means that attempting to utilize string interpolation in the manner you are trying will not work because Tailwind won't be able to identify the class name.

An alternative approach is to assign your props to static class names:

const Component = ({animal}) => {
  const animalBgVariants = {
    dog: 'bg-animaltype-dog',
    cat: 'bg-animaltype-cat',
    // ...
  }

  return (
    <div className={`[...other classes] ${animalBgVariants[animal.types[0].type.name]}`}></div>
  )
}

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Answer №1

Similar questions

Angular causing alignment issues for items not centered

What could be causing the malfunction in the cloning of the carousel item?

Trouble with Div Display

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

"Seeking advice on how to nest a service provider within another one in AngularJS 2. Any

Navigating the new Material UI V5: Unlocking theme properties types in @mui/material version 5

Changing the Color of Hamburger Menu Lines in Bootstrap

Ways to verify if the current date exists within a TypeScript date array

Converting a string array to an object leads to an issue where the element implicitly has an 'any' type, as the expression of type 'string' cannot be used to index the type '{}'

Issues with JavaScript causing slideshow to malfunction

The Firebase cloud function URL does not serve as the default base URL for requests originating from the frontend

What is the best way to design a div that showcases text on top of a background image, complete with a pointer or arrow, and automatically adjusts its width to properly display the

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

Error Message in Terminal When Launching React Application Using Webpack

Angular 5.2: Component type does not contain the specified property

Unable to apply 3rd condition with ngClass into effect

Tips for customizing elements using Wordpress

Ways to add extra dots to your listing style

Issue with jQuery incorrectly calculating height post-refresh

The upcoming development server will be shutting down on its own