Instalar Tailwind CSS con Symfony

Configurando Tailwind CSS en un proyecto Symfony.

Crea tu proyecto

Comienza creando un nuevo proyecto Symfony si aún no tienes uno configurado. El enfoque más común es usar el Instalador de Symfony.

Terminal

symfony new --webapp my-project
cd my-project

Instala Webpack Encore

Instala Webpack Encore, que se encarga de construir tus assets. Consulta la documentación para obtener más información.

Terminal

composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

Instala Tailwind CSS

Usando npm, instala @tailwindcss/postcss y sus dependencias peer, así como postcss-loader.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Habilita el soporte para PostCSS

En tu archivo webpack.config.js, habilita el PostCSS Loader. Consulta la documentación para más información.

webpack.config.js

Encore
  .enablePostCssLoader()
;

Configura los plugins de PostCSS

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

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Importa Tailwind CSS

Añade un @import a ./assets/styles/app.css que importe Tailwind CSS.

app.css

@import "tailwindcss";

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run watch.

Terminal

npm run watch

Comienza a usar Tailwind en tu proyecto

Asegúrate de que tu CSS compilado esté incluido en el <head> y luego comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.

base.html.twig

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    {% block stylesheets %}
      {{ encore_entry_link_tags('app') }}
    {% endblock %}
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>