Início / coding / Perguntas / 79560404
Accepted
827 men
Asked: 2025-04-08 00:44:26 +0800 CST

TailwindCSS v4 responsivo e CSS personalizado não aplicado

  • 772

Eu tenho app.cssassim:

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

e componente como este:

import React from 'react'

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

export default Cat
  • O problema é que .catmobileeles .catpcfuncionam perfeitamente, mas .sm:catpcnão funcionam.
  • sm:text-xlfunciona também então talvez o problema não esteja lá sm.
css

2 respostas

  1. Best Answer

    O que são camadas

    Desde a versão 4, as camadas CSS desempenham um papel significativo.

    A regra @layerCSS at é usada para declarar uma camada em cascata e também pode ser usada para definir a ordem de precedência no caso de múltiplas camadas em cascata.

    Estilos sem camadas, como .catpce .catmobilesempre serão mais fortes que as classes TailwindCSS. Coloque-os na camada base/componentes para torná-los mais fracos.

    @import 'tailwindcss';

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

    Utilitários no TailwindCSS

    Não sei o propósito dessas duas classes. Mas sim, você também pode usar a nova @utilitydiretiva mencionada por @leodev , que visa substituir @layer componentse @layer utilities. Com a @utilitydiretiva, o TailwindCSS pode colocar automaticamente suas classes no lugar apropriado no CSS compilado.

    @import 'tailwindcss';

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

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

    @import "tailwindcss";

@theme {
  /* ... */
}

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

    Isso funciona para todas as classes de utilitários do framework, o que significa que você pode alterar literalmente qualquer coisa em um determinado ponto de interrupção — até mesmo coisas como espaçamento de letras ou estilos de cursor.

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

    • 0

relate perguntas