0
151
VistasLos puntos de interrupción móviles de TailwindCss no funcionan
Estoy creando una barra de navegación personalizada en Gatsby usando TailwindCss para diseñar. Como referencia, estoy siguiendo un tutorial en YouTube cuyo código se puede encontrar aquí .
Cuando uso los puntos de interrupción móviles como prefijo, como en el siguiente ejemplo, solo el div que dice "móvil" funciona como debería ser:
Diseño.js
<nav> <div className={"flex"}> <div className={"hidden md:flex"}>desktop</div> <div className={"md:hidden"}>mobile</div> </div> </nav>tailwind.config.js
module.exports = { content: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"], darkMode: "class", theme: {}, plugins: [] };estilos/global.css
@tailwind base; @tailwind components; @tailwind screens; @tailwind utilities;La salida "escritorio" debe mostrarse cuando el texto "móvil" desaparece, pero por alguna razón no es así. ¿Estoy haciendo algo mal o hay algún problema con Tailwind?
EDITAR: ejemplo de reproducción aquí
2 Respuestas
Responde la pregunta0
El problema parece estar en su archivo global.css .
No debe agregar las @tailwind screens; . Dado que está utilizando la versión más reciente de TailwindCSS, @tailwind screens; quedó en desuso desde 2.2 en modo JIT y ahora se llama: @tailwind variants;
Registro de cambios de viento de cola
A partir de la versión 2.2, la directiva de pantallas @tailwind ha cambiado de nombre a variantes @tailwind, ya que ahora es el punto de inyección para todas las variantes, no solo para las variantes receptivas.
Algo más de información sobre cuándo las @tailwind variants; debería ser añadido:
La función de variantes @tailwind se considera una vía de escape avanzada y recomendamos omitirla de forma predeterminada. Solo debe usarlo si su proyecto no funcionará correctamente sin él, lo cual solo es realmente cierto si está introduciendo Tailwind en un sistema heredado con una base de código CSS existente muy frágil que tiene estilos que absolutamente deben estar al final. de la hoja de estilo para que las cosas funcionen.
Además, de acuerdo con la instalación de Tailwind con las instrucciones de Gatsby , no debe agregar las @tailwind variants;
Dicho esto, no debería necesitarlo en este caso, por lo que simplemente eliminándolo en su archivo global.css solucionará el problema.
Su nuevo archivo global.css debe ser:
@tailwind base; @tailwind components; @tailwind utilities;0
Problema resuelto después de notar que faltaba el complemento autoprefixer en postcss.config.js . Acabo de rehacer la instalación de Gatsby.