next.js: las clases de Tailwind en HTML no funcionan mientras que las del archivo CSS funcionan

Entonces, si las clases funcionan como se esperaba, se supone que la página se verá así:

Pero en cambio, se ve así:

Este es el código en el archivo jsx:

                <header
                    className={"p-2 bg-red-500"}
                >
                    <h1>{postData.title}</h1>
                    <p>{postData.date}</p>
                    <img
                        src={formatImgSrc(postData.thumbnail)}
                    />
                </header>
                <div
                    className={"cms-content"}
                    dangerouslySetInnerHTML={
                        { __html: postData.contentHtml }
                    }>
                </div>

Y aquí está el archivo CSS en /styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.cms-content > p {
    @apply mt-6 bg-red-500;
}

Como puedes ver, las clases que puse en HTML no se aplican mientras que las del archivo CSS funcionan bien. Realmente no entiendo por qué.

Aquí hay más archivos como referencia.

siguiente.config.js

module.exports = {
    webpack: (cfg) => {
        cfg.module.rules.push(
            {
                test: /\.md$/,
                loader: 'frontmatter-markdown-loader',
                options: { mode: ['react-component'] }
            }
        )
        return cfg;
    }
}

postcss.config.js

module.exports = {
  plugins: {
    "@tailwindcss/jit": {},
    autoprefixer: {},
  }
}

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Hola, usando esta configuración, Tailwind creó el archivo Output.css. necesita agregar ese archivo en su página; de lo contrario, puede usar tailwind usando cdn <link href="unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="hoja de estilo">

- Vikas Harad

27/03/2021 a las 14:46

@VikasHarad Intenté agregar el enlace cdn al encabezado y todavía no funciona, y tampoco veo ningún archivo output.css.

- Risan

27/03/2021 a las 15:58

@juliomalves sí, tengo import '../styles/globals.css' en la parte superior de páginas/_app

- Risan

27/03/2021 a las 15:59

Ese archivo globals.css es el mismo que tiene las directivas @tailwind, ¿verdad?

- juliomalves

27/03/2021 a las 16:03

@juliomalves sies

- Risan

27/03/2021 a las 16:07

------------------------------------

Intente mover la clase .cms-content encima de la importación de utilidades @tailwind. Esas importaciones van en orden y es posible que estés anulando tus utilidades. Vea este tutorial sobre cómo crear sus propias clases: https://youtu.be/TrftauE2Vyk?t=127

------------------------------------

agrega tu carpeta esta:

module.exports = {
  purge: [
   './pages/**/*.{js,ts,jsx,tsx}', 
   './your_folder/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Compartir mejorar esta respuesta Seguir Respondido

27 de marzo de 2021 a las 14:57

Kickster

Kickster

1

1

1 insignia de bronce

1

Sin embargo, esta página ya está dentro de la carpeta páginas, por lo que esse supone que está cubierto por './pages/**/*.{js,ts,jsx,tsx}'

- Risan

27/03/2021 a las 16:00