Instalar Tailwind CSS con Symfony

Configuración de Tailwind CSS en un proyecto Symfony.

Crear tu proyecto

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

Terminal

symfony new --webapp my-projectcd my-project

Instalar Webpack Encore

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

Terminal

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

Instalar Tailwind CSS

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

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Habilitar el soporte para PostCSS

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

webpack.config.js

Encore  .enablePostCssLoader();

Configurar 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": {},  },};

Importar Tailwind CSS

Añade un @import a ./assets/styles/app.css que importe Tailwind CSS y un @source que ignore el directorio public para evitar bucles de recompilación en el modo de observación (watch mode).

app.css

@import "tailwindcss";@source not "../../public";

Iniciar tu proceso de compilación

Ejecuta tu proceso de compilación con npm run watch.

Terminal

npm run watch

Comenzar 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 dar estilo a 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>