Tailwind CSS not loading custom classes on React app

AlanJ

I have a React app that uses Tailwind CSS and multiple themes.

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  [data-theme='default'] {
    --color-primary: #008cba;
    --color-secondary: #e7e7e7;
    --color-success: #4caf50;
    --color-danger: #f44336;
  }

  [data-theme='secondary'] {
    --color-primary: #af8ffa;
    --color-secondary: #e7e7e7;
    --color-success: #4caf50;
    --color-danger: #f44336;
  }
}

@layer components {
  .btn-primary {
    background-color: theme(colors.primary);
    color: theme(colors.danger);
  }
  .btn-secondary {
    background-color: theme(colors.secondary);
    color: black;
  }
  .btn-success {
    background-color: theme(colors.success);
  }
  .btn-danger {
    background-color: theme(colors.danger);
  }
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        success: 'var(--color-success)',
        danger: 'var(--color-danger)',
      },
    },
  },
  plugins: [],
};

I defined a simple button component that takes a variant ('primary' | 'secondary' | 'success' | 'danger') as a prop:

import { ButtonProps } from './Button.types';

function Button({ variant, children, ...rest }: ButtonProps) {
  return (
    <button
      className={`border-none py-2 px-4 text-center inline-block text-md border-r-4 cursor-pointer btn-${variant}`}
      {...rest}>
      {children}
    </button>
  );
}

export default Button;

The problem is that the custom .btn- classes, like .btn-primary, don't get applied consistently. Most of the time they won't render, however if while the app is loaded I change the btn class and I hardcode something btn-primary then the styles load fine. After that I can change it back to btn-${variant} and the styles load fine. At this point I can also change the styles in index.css and the new styles also get applied.

As a side note, when they don't get rendered they won't even show in the styles tab in google developer tools. If I inspect the element the class is there, but the styles don't show in the styles tab.

I don't really know what I'm missing here.

Wongjn

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don't construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Tailwind classes not rendering in react app

Tailwind css 3.0.5 classes is not working with react

React App adding Pure CSS to Tailwind CSS

Tailwind CSS classes is not working with React, error "You need to enable JavaScript to run this app..."

Tailwind CSS custom gradient with React state and FastAverageColor

Does Tailwind CSS remove unused custom CSS classes in production?

Tailwind CSS does not work with React App

Tailwind CSS does not work with react app - no affect

Tailwind CSS not displaying using Create React App

Unable to Apply Tailwind CSS Classes in React Component (TypeScript)

React and Tailwind CSS: dynamically generated classes are not being applied

How to use Tailwind CSS in React to configure Create React App?

Why is my custom Tailwind CSS utility not applying to React elements?

Tailwind classes Not Working in nuxt app?

Navbar in React and Tailwind CSS

Which has a higher priority, custom utility classes or atomic classes in Tailwind CSS?

Tailwind CSS is not outputting classes for the background

Custom TTF fonts loading slowly in React app

Custom group "states" in tailwind css

Is there any function to remove all of the tailwind css classes remove from NextJs app?

Tailwind in React/Next.js doesn't generate css for text-*xl classes if variable is used in className

How to change the primary color of the app from app's UI in React JS(Next JS) using tailwind CSS

Add spacing in between items with css tailwind classes

Using Tailwind opacity classes with CSS variables

How in Tailwind CSS to use classes with arbitrary values

Tailwind css purge removes all dark classes

Color classes of Tailwind CSS not working when appended

Tailwind css classes not showing in Storybook build

React app inherit style for CSS between classes