Some Tailwind CSS classes sometimes don't work in react

Question

I'm very new to Tailwind, and I have weird problem. When I apply tailwind classes to react component, some of them (eg. bg-default-800, rounded-lg) work normal, but some don't.

export function Tile(props: PropsWithChildren<propsInterface>) {
    return (
        <div
            className={'bg-default-800 m-2 rounded-lg flex flex-col justify-center ' +
                'w-' + props.width + '/4 h-' + props.height + ' '}>
            {props.children}
        </div>
    )
}

Here's usage of this component:

function App() {
  return (
    <div className={'flex flex-row flex-wrap'}>
        <Tile width={1} height={36}>
            tile 1
        </Tile>
        <Tile width={3} height={36}>
            tile 2
        </Tile>
    </div>
  )
}

Here's tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'default': {
          '800': '#166534',
        },
      },
    },
  },
  plugins: [],
}

In this case, 'w-1/4' works, but 'w-3/4' don't. It worked only after I had changed className to hardcoded values (without props). Then, I redo changes and it still works, which is weird. When it comes to height, 'h-32' works, but 'h-36' doesn't, like many other values from tailwind documentation. Shift + F5 doesn't help.

Did you have a look to : stackoverflow.com/questions/67499193/… — Rapido
– Rapido, Commented Feb 10, 2023 at 9:57

Borjante · Accepted Answer · 2023-02-10 09:57:35Z

2

You are using mode: 'jit' option in tailwind config.

Tailwind is trying to remove all non used classes from the final bundle.

From the docs:

Dynamic values Note that you still need to write purgeable HTML when using arbitrary values, and your classes need to exist as complete strings for Tailwind to detect them correctly.

Don't use string concatenation to create class names

<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>

Do dynamically select a complete class name

<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

In your example you are using the first version, which won't work

answered Feb 10, 2023 at 9:57

Borjante

10.7k6 gold badges40 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aminarune · Accepted Answer · 2023-02-10 09:51:50Z

0

Try to use default config of tailwinds

answered Feb 10, 2023 at 9:51

Aminarune

6321 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

Some Tailwind CSS classes sometimes don't work in react

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related