Question 53150 in Javascript Question posted in
A very good W3school tutorial can be found here.

TailwindCSS classes in React Components – Javascript

I am using react with TailwindCSS. I want to have a div grid element with a dynamic row and col count. Because of this, when I pass in my tailwind classes to classNames of the div, I am using string interpolation: <div className={grid grid-flow-dense grid-rows-${r} grid-cols-${c}}></div> where r and c are variables (4 and 3 in my test case). My div does not correctly work, and renders a grid with 12 rows and 1 column. (I couldn’t figure out how to show the backtick character in stack overflow so just imagine them around the string)

I tried a simple sanity check by using a string literal <div className={"grid grid-flow-dense grid-rows-4 grid-cols-3"}></div> and it suddenly works, creating a 4 x 3 grid. Why is this happening?

Additionally, I found that if i use an arbitrary number like "grid-rows-42" tailwindCSS will not work. I was wondering if there is a way to generate the tailwind css on the fly using arbitrary values. For example, width class "w-16" exists already but "w-17" doesn’t. So instead I can use "w-[17rem]" to generate it on the fly. Is there something similar for the "grid-rows" and "grid-cols" classes?

Edit: just in case below is my tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Tags:

2

Answers


  1. 0

    You need to mention the new width class in the tailwindcss config

    https://tailwindcss.com/docs/width#customizing-your-theme

     theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }

    In tailwindcss CSS is added to the CSS file after scanning the code and it adds only the required class, not all of tailwind class.

    grid-rows-${r} grid-cols-${c}

    tailwind does know what will the value of r and c

    Login or Signup to reply.
  2. 0

    TailwindCSS doesn’t allow you to generate classes dynamically. So when you use the following to generate the class…

    className={grid grid-flow-dense grid-rows-${r} grid-cols-${c}}

    …TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.

    Instead, you must include the full name of the class in your source code. You can return the full value like this

    function  myDecoStyle(r,c) {
   return "grid grid-flow-dense grid-rows-" + r + "grid-cols-" + c ;
}

    where r and c is your row count and col count value you are passing here.

    By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.

    And use it like

    <div className={`${myDecoStyle(3,5)}`}> </div>

    Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search