### Install Tailwind CSS Bundle Source: https://symfony.com/bundles/TailwindBundle/current/index.html Install the bundle using Composer and initialize your application with the Tailwind CSS configuration. ```bash $ composer require symfonycasts/tailwind-bundle $ php bin/console tailwind:init ``` -------------------------------- ### Install External NPM Packages Source: https://symfony.com/bundles/TailwindBundle/current/index.html For plugins not included by default, install them via npm and then add them to your `tailwind.config.js`. ```bash $ npm install flowbite ``` -------------------------------- ### Install Tailwind CSS via npm Source: https://symfony.com/bundles/TailwindBundle/current/index.html Install Tailwind CSS using npm if you need to use first-party plugins or manage it as a project dependency. ```bash $ npm add tailwindcss ``` -------------------------------- ### Configure Symfony CLI Worker Source: https://symfony.com/bundles/TailwindBundle/current/index.html Add the Tailwind build command as a worker to your .symfony.local.yaml file to start it automatically with `symfony server:start`. ```yaml # .symfony.local.yaml workers: # ... tailwind: cmd: ['symfony', 'console', 'tailwind:build', '--watch'] ``` -------------------------------- ### Dump Full Configuration Source: https://symfony.com/bundles/TailwindBundle/current/index.html Run this command to see the complete configuration of the symfonycasts_tailwind bundle. ```bash $ php bin/console config:dump symfonycasts_tailwind ``` -------------------------------- ### Build Tailwind CSS Source: https://symfony.com/bundles/TailwindBundle/current/index.html Run the build command to compile your CSS. Use the --watch option to automatically recompile on changes. ```bash $ php bin/console tailwind:build --watch ``` -------------------------------- ### Deploy Tailwind CSS Build Source: https://symfony.com/bundles/TailwindBundle/current/index.html Run the `tailwind:build` command with the --minify flag before `asset-map:compile` during deployment. ```bash $ php bin/console tailwind:build --minify $ php bin/console asset-map:compile ``` -------------------------------- ### Build Tailwind with Custom PostCSS via Console Source: https://symfony.com/bundles/TailwindBundle/current/index.html Alternatively, you can pass the `--postcss` option with the path to your PostCSS configuration file directly to the `tailwind:build` console command. ```bash $ php bin/console tailwind:build --postcss='postcss.config.js' ``` -------------------------------- ### Set Multiple Input CSS Files Source: https://symfony.com/bundles/TailwindBundle/current/index.html Provide an array to the `input_css` option to use multiple source files for Tailwind. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: input_css: - 'assets/styles/other.css' - 'assets/styles/another.css' ``` -------------------------------- ### Set Single Input CSS File Source: https://symfony.com/bundles/TailwindBundle/current/index.html Configure the `input_css` option to specify the main Tailwind source file. Defaults to `assets/styles/app.css`. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: input_css: 'assets/styles/other.css' ``` -------------------------------- ### Set Tailwind Binary Version Source: https://symfony.com/bundles/TailwindBundle/current/index.html Use the `binary_version` option to specify a particular version of the Tailwind CSS binary to be downloaded and used by the bundle. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: binary_version: 'v3.3.0' ``` -------------------------------- ### Set Custom Tailwind Binary Path Source: https://symfony.com/bundles/TailwindBundle/current/index.html Configure the `binary` option in `symfonycasts_tailwind.yaml` to point to the npm-installed Tailwind binary, typically located in `node_modules/.bin/`. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: binary: 'node_modules/.bin/tailwindcss' ``` -------------------------------- ### Watch Mode with Polling Source: https://symfony.com/bundles/TailwindBundle/current/index.html If experiencing issues with watch mode in Docker on a Windows host, try using the --poll option. ```bash $ php bin/console tailwind:build --watch --poll ``` -------------------------------- ### Set Tailwind Binary Platform Source: https://symfony.com/bundles/TailwindBundle/current/index.html Override the automatically detected platform for the Tailwind binary download by setting the `binary_platform` option. Available options include various Linux, macOS, and Windows architectures. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: # one of: 'linux-arm64', 'linux-arm64-musl', 'linux-x64', 'linux-x64-musl', 'macos-arm64', 'macos-x64', 'windows-x64' binary_platform: 'linux-x64' ``` -------------------------------- ### Set Tailwind Configuration File Source: https://symfony.com/bundles/TailwindBundle/current/index.html Specify the `config_file` option to use a custom Tailwind configuration file. Defaults to `tailwind.config.js`. This option is ignored in Tailwind CSS v4+. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: config_file: 'tailwind.config.js' ``` -------------------------------- ### Add Tailwind Plugins Source: https://symfony.com/bundles/TailwindBundle/current/index.html Configure `tailwind.config.js` to include official plugins like typography. For v4+, use the @plugin directive in your CSS. ```javascript module.exports = { plugins: [ require('flowbite/plugin') ] } ``` -------------------------------- ### Set PostCSS Configuration File Source: https://symfony.com/bundles/TailwindBundle/current/index.html Specify the `postcss_config_file` option to use a custom PostCSS configuration file with Tailwind. This option is not available in Tailwind CSS v4+. ```yaml # config/packages/symfonycasts_tailwind.yaml symfonycasts_tailwind: postcss_config_file: 'postcss.config.js' ``` -------------------------------- ### Add Vendor CSS to Tailwind Config Source: https://symfony.com/bundles/TailwindBundle/current/index.html After updating Twig configuration, add the vendor CSS file paths to your `tailwind.config.js` file to ensure Tailwind scans them for classes. ```javascript # tailwind.config.js module.exports = { content: [ "./assets/**/*.js", "./templates/**/*.html.twig", + "./vendor/symfony/twig-bridge/Resources/views/Form/*.html.twig", ], } ``` -------------------------------- ### Include Vendor Form Themes in Twig Source: https://symfony.com/bundles/TailwindBundle/current/index.html When using CSS classes from vendor files, like Twig bridge form themes, update your Twig configuration to include them. ```yaml # config/packages/twig.yaml twig: form_themes: - 'tailwind_2_layout.html.twig' ``` -------------------------------- ### Include Tailwind CSS in Twig Source: https://symfony.com/bundles/TailwindBundle/current/index.html Include the main Tailwind CSS input file in your base Twig template to apply styles. ```twig {# templates/base.html.twig #} {% block stylesheets %} {% endblock %} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.