Instalar Tailwind CSS con Gatsby

Configuración de Tailwind CSS en un proyecto Gatsby.

Crear tu proyecto

Comienza creando un nuevo proyecto Gatsby si aún no tienes uno configurado. El enfoque más común es utilizar Gatsby CLI.

Terminal

gatsby new my-projectcd my-project

Instalar Tailwind CSS

Usando npm, instala @tailwindcss/postcss, sus dependencias directas y gatsby-plugin-postcss.

Terminal

npm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss

Habilitar el plugin PostCSS de Gatsby

En tu archivo gatsby-config.js, habilita gatsby-plugin-postcss. Consulta la documentación del plugin para obtener más información.

gatsby-config.js

module.exports = {  plugins: [    'gatsby-plugin-postcss',    // ...  ],}

Configurar los plugins de PostCSS

Crea un archivo postcss.config.js en la raíz de tu proyecto y añade el plugin @tailwindcss/postcss a tu configuración de PostCSS.

postcss.config.js

module.exports = {  plugins: {    "@tailwindcss/postcss": {},  },};

Importar Tailwind CSS

Crea un archivo ./src/styles/global.css y añade un @import que importe Tailwind CSS.

global.css

@import "tailwindcss";

Importar el archivo CSS

Crea un archivo gatsby-browser.js en la raíz de tu proyecto si aún no existe, e importa tu archivo ./src/styles/global.css recién creado.

gatsby-browser.js

import './src/styles/global.css';

Iniciar tu proceso de compilación

Ejecuta tu proceso de compilación con gatsby develop.

Terminal

gatsby develop

Comenzar a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.

index.js

export default function IndexPage() {  return (    <Layout>      <h1 className="text-3xl font-bold underline">        Hello world!      </h1>    </Layout>  )}