Trabajo con Tailwind en NextJS

En NextJS, para la estilización se puede utilizar el framework CSS Tailwind, que se usa a menudo junto con React. Veamos cómo usarlo.

Para trabajar con los estilos de Tailwind se necesitan dos archivos: tailwind.config.js y postcss.config.js. Dado que durante la instalación del proyecto elegimos la opción "usar estilos Tailwind", estos archivos ya están generados en nuestro proyecto y se encuentran en su raíz. Si no existen tales archivos, debe instalar Tailwind de acuerdo con la documentación oficial.

Agreguemos un peso de fuente negrita y color amarillo al texto del párrafo usando estilos Tailwind. En Tailwind CSS, los números utilizados en las clases para colores denotan la intensidad o el tono del color. Estos números varían de 50 a 900. Para el texto del párrafo, elijamos un tono medio:

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    text text text
  </p>;
}