TailwindCSS v4自定义类响应式样式不生效问题求助

问题：自定义CSS类.catmobile和.catpc可正常工作，但响应式类sm:catpc无法生效。不过Tailwind自带的sm:text-xl能正常使用，说明sm断点本身没有问题。

现有代码 #

app.css #

@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;
}

React组件 #

import React from 'react'

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

export default Cat

问题原因与解决方法 #

TailwindCSS v4 不会自动为全局自定义CSS类生成响应式变体，这就是sm:catpc失效的核心原因。以下是两种可行的解决方式：

方案1：用@layer utilities包裹自定义类 #

将自定义类放入@layer utilities块中，Tailwind会自动为这些类生成所有断点的响应式变体。修改后的app.css代码如下：

@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;

@layer 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;
  }
}

方案2：手动编写响应式类 #

如果不想使用@layer，可以直接为sm断点手动编写对应的媒体查询类：

@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;
}

@media (min-width: 640px) {
  .sm\: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;
  }
}

注意事项 #

• 方案1更推荐，无需重复编写代码，Tailwind会自动处理所有断点的变体。
• 修改代码后需重新编译CSS，确保生成对应的响应式类。

内容的提问来源于stack exchange，提问作者827 men