React TailwindCSS only rendering in mobile view in production

Question

I have created a site using React with TailwindCSS v4.1.16.

When running the site in dev mode (npm run dev), the responsive design is working and I can see the changing formats when I resize my screen or use devtools. However, when in production the site is always showing in mobile view no matter the size of the screen. The build command being used in prod is npm run build .

Here is the scripts section of the package.json

"scripts": {
    "start": "react-scripts start",
    "build": "npm run tw:build && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "tw:watch": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch",
    "tw:build": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css",
    "dev": "concurrently \"npm run tw:watch\" \"npm start\""
}

src/input.css

@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
@import "tailwindcss";

@layer utilities {
  .font-logo {
    font-family: 'Birthstone', cursive;
  }
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './output.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx,json}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Quicksand', 'sans-serif'],   // default body text
        logo: ['Birthstone', 'cursive'],     // logo
      },
    },
  },
  safelist: [
    'font-logo',
    {
      pattern: /(sm|md|lg|xl|2xl):/,
    },
  ],
  plugins: [],
};

One of my components

import React from "react";
import BusinessContent from "../content/BusinessContent";
import AboutContent from "../content/AboutContent.json";

const About = () => {
  return (
    <section id="about" className="w-full text-gray-900 py-16 px-4 sm:px-8" style={{ backgroundColor: BusinessContent.secondaryColour }}>
      <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center md:space-x-12">
        {/* Image */}
        <img
          src={AboutContent.photo}
          alt="Person1"
          className="w-full md:w-1/3 rounded-lg shadow-lg mb-6 md:mb-0"
        />

        {/* Text */}
        <div className="md:flex-1">
          <h2 className="text-3xl sm:text-4xl font-logo mb-4">
            {AboutContent.title}
          </h2>
          {AboutContent.paragraphs.map((p, i) => (
            <p key={i} className="text-base sm:text-lg leading-relaxed mt-4">
              {p}
            </p>
          ))}
        </div>
      </div>
    </section>
  );
};

export default About;

rozsazoltan · Accepted Answer · 2025-11-05 15:53:54Z

1

TL;DR: The JS file is completely ignored in v4, which is why the configuration written inside it doesn't work. And the classes you manually wrote inside @layer utilities are not recognized by v4, which is why you couldn't apply variants to them. That's what @utility is for - but in this case, @theme already solves the problem.

Starting from TailwindCSS v4, the tailwind.config.js file is no longer needed — TailwindCSS does not take its contents into account anymore. Instead, there's a new CSS-first configuration approach, which in your case would look something like this:

@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: Quicksand, sans-serif;
  /* This way, generated font-logo utility the variants will work */
  --font-logo: Birthstone, cursive;
}

Instead of using @layer utilities, you should use @utility:

/* This way, the variants will work on it,
   but you don't need it, because you've
   already declared it properly in @theme. */
@utility font-logo {
  font-family: 'Birthstone', cursive;
}

But in the case of font-logo, you don't need @utility either, since that was just an attempt to fix the issue because you didn't understand why the font defined in the JS file wasn't working automatically - so you tried to manually add font-logo to the utility.

The content property has been replaced by automatic source detection, which can also be customized manually if needed:

The safelist has been reworked and is now integrated into the automatic source detection directive, but it's recommended to use it carefully to avoid generating an excessively large CSS file. For the font-logo declared with @utility, you no longer need to generate variants using a safelist. (It's generally never needed, and for your current case, you definitely don't need it.)

edited Nov 5 at 15:53

answered Nov 5 at 15:46

rozsazoltan

18.2k8 gold badges49 silver badges145 bronze badges

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

7 Comments

myers96 Nov 5 at 16:10

Thank you for the response! I have removed the config file and updated the input.css per your suggestions but the site is still always rendering in mobile view even for large screens?

rozsazoltan Nov 5 at 16:48

You should check in DevTools whether the class corresponding to the variant is actually being generated, and make sure you're not overriding it with overly strong code. If it still doesn't work, a GitHub repo would help a lot in understanding the problem.

rozsazoltan Nov 5 at 16:52

Also, I didn't mention this in my previous answer, but using the Tailwind CLI doesn't seem like the best choice for React. If you're running React with Vite, the Vite plugin is a much better option. (And if you're not using Vite, there's still the PostCSS plugin you can use.) Some reference: stackoverflow.com/a/79415114/15167500 and Tailwind CSS v4: more packages and new Vite support and reddit.com/r/tailwindcss/comments/1oe6pdt/comment/nkz4xim and tailwindcss.com/docs/installation

rozsazoltan Nov 5 at 16:53

Because CRA is deprecated: stackoverflow.com/a/79500392/15167500

rozsazoltan Nov 5 at 19:53

That's fine - the issue isn't reproducible, and as far as I can see, your output.css contains all your classes. I think your browser cache is messing with you and is loading an older, cached version of output.css. --- It looks like you're still at the beginning, so I'd just restart the whole project with Vite + React, using this guide: stackoverflow.com/a/79500392/15167500 (second Vite part) - then add the components and content folders the same way as before.

myers96 Nov 6 at 11:31

Moving it to Vite resolved all issues. Thanks very much

|

Collectives™ on Stack Overflow

React TailwindCSS only rendering in mobile view in production

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related