TailwindCSS v4 responsive and custom CSS not applied

Question

I have app.css like this:

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source '../**/*.blade.php'; @source '../**/*.js';

@import 'tailwindcss/preflight'; @tailwind utilities;

.catpc {
  width: 100px;   height: 125px;   margin: 0 auto;   object-fit: contain;   background-image: url('https://res.cloudinary.com/cloudinarymen/image/upload/v1743358609/makotodecor/backgrounds/catpc_y5dnxd.png');
  -webkit-animation: moveXpc 1s steps(32) infinite;   -moz-animation: moveXpc 1s steps(32) infinite;   -o-animation: moveXpc 1s steps(32) infinite;   animation: moveXpc 1s steps(32) infinite;
}

.catmobile {
  width: 50px;   height: 63px;   margin: 0 auto;   object-fit: contain;   background-image: url('https://res.cloudinary.com/cloudinarymen/image/upload/v1743358607/makotodecor/backgrounds/catmobile_jmmbjw.png');
  -webkit-animation: moveXmobile 1s steps(32) infinite;   -moz-animation: moveXmobile 1s steps(32) infinite;   -o-animation: moveXmobile 1s steps(32) infinite;   animation: moveXmobile 1s steps(32) infinite;
}

and component like this:

import React from 'react'

const Cat = () => {
  return <div className="catmobile sm:catpc"></div>
}

export default Cat

• The problem is .catmobile and .catpc work perfectly but .sm:catpc don't.
• sm:text-xl work also so maybe problem not in sm.

Answer 1

What's layers

Since v4, CSS layers play a significant role.

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

• CSS: @layer at-rule - MDN Docs

Unlayered styles like .catpc and .catmobile will always be stronger than the TailwindCSS classes. Place them in the base/components layer to make them weaker.

• @layer priority - MDN Docs

@import 'tailwindcss';

@layer base {
  .catpc {
    /* ... */
  }
  
  .catmobile {
    /* ... */
  }
}

• What is the purpose of the TailwindCSS @layer directive? - StackOverflow
• TailwindCSS v4 custom breakpoint was not successfully applied - StackOverflow

Utilities in TailwindCSS

I don't know the purpose of these two classes. But yes, you can also use the new @utility directive mentioned by @leodev, which is intended to replace @layer components and @layer utilities. With the @utility directive, TailwindCSS can automatically place your classes into the appropriate place in the compiled CSS.

• @utility directive - TailwindCSS v4 Docs
• Adding custom utilities - TailwindCSS v3 to v4

@import 'tailwindcss';

@utility catpc {
  /* ... */
}
  
@utility catmobile {
  /* ... */
}

• Utility specificity changes in v4 - StackOverflow
• TailwindCSS v4 how to override only a property - StackOverflow
• Trying to apply hover: to a Tailwind CSS custom-class I made, but it doesn't seems to work - StackOverflow

Answer 2

https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities

@import "tailwindcss";

@theme {
  /* ... */
}

@utility catpc {
    background-color: blue;
}
@utility catmobile {
  background-color: red;
}

This works for every utility class in the framework, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles.

https://tailwindcss.com/docs/responsive-design