• Installation
• Usage
  • Watch mode in Docker with Windows host
  • Symfony CLI
• How Does It Work?
• Deploying
• Form Theming
• Tailwind Plugins
• Configuration
• Using a Different Binary
• Using a Different Binary Version
• Using a PostCSS config file

Note

Want to use Tailwind CSS with WebpackEncore instead? Check outtheTailwind + Symfony Docs.

Installation

Install the bundle & initialize your app with two commands:

12

$composer require symfonycasts/tailwind-bundle$php bin/console tailwind:init

Done! This will create atailwind.config.js file and make sure yourassets/styles/app.css contains the Tailwind directives.

Usage

To use the Tailwind CSS file, start by including the input file(assets/styles/app.css by default) inbase.html.twig. It's quite likelyyou already have this:

12345

{# templates/base.html.twig #}{%block stylesheets %}<linkrel="stylesheet"href="{{ asset('styles/app.css') }}">{%endblock %}

The bundle works by automatically swapping out the contents ofstyles/app.csswith the compiled CSS. For this to work, you need to run thetailwind:buildcommand:

1

$php bin/console tailwind:build --watch

That's it! This will watch for changes to yourassets/styles/app.css fileand automatically recompile it when needed. If you refresh the page, thefinalapp.css file will already contain the compiled CSS.

1

$php bin/console tailwind:build --watch --poll

123456

# .symfony.local.yamlworkers:# ...tailwind:cmd:['symfony','console','tailwind:build','--watch']

How Does It Work?

The first time you run one of the Tailwind commands, the bundle willdownload the correct Tailwind binary for your system into avar/tailwind/directory.

When you runtailwind:build, that binary is used to compileeach CSS file into avar/tailwind/<filename>.built.css file.Finally, when the contents of the CSS file is requested, the bundle swaps thecontents of that file with the contents ofvar/tailwind/<filename>.built.css.

E.g.: A request forassets/styles/app.css will be replaced byvar/tailwind/app.built.css.Nice!

Deploying

When you deploy, run thetailwind:build commandbefore theasset-map:compilecommand so the built file is available:

12

$php bin/console tailwind:build --minify$php bin/console asset-map:compile

Form Theming

To make your Symfony forms look nice with Tailwind, you'll need a dedicated form theme.Check outhttps://github.com/tales-from-a-dev/flowbite-bundle for a helpful bundle thatprovides that!

Tailwind Plugins

The Tailwind binary that the bundle downloads already contains the "Official Plugins" - e.g.typography.This means you can use those simply by adding the line to theplugins key intailwind.config.js - e.g.require('@tailwindcss/typography').

In Tailwind CSS v4 you include plugins with the@plugin directive in yourinput CSS file - e.g.@plugin "@tailwindcss/typography";.

For other plugins - likeFlowbite Datepicker,you will need to follow that package's documentation torequire the packagewithnpm:

1

$npm install flowbite

Then add it totailwind.config.js:

12345

module.exports = {plugins: [require('flowbite/plugin')    ]}

Configuration

To see the full config from this bundle, run:

1

$php bin/console config:dump symfonycasts_tailwind

The main option isinput_css option, which defaults toassets/styles/app.css.This represents the "source" Tailwind files (the one that contains the@tailwinddirectives):

123

# config/packages/symfonycasts_tailwind.yamlsymfonycasts_tailwind:input_css:'assets/styles/other.css'

It's possible to use multiple input files by providing an array:

12345

# config/packages/symfonycasts_tailwind.yamlsymfonycasts_tailwind:input_css:-'assets/styles/other.css'-'assets/styles/another.css'

Another option is theconfig_file option, which defaults totailwind.config.js.This represents the Tailwind configuration file:

123

# config/packages/symfonycasts_tailwind.yamlsymfonycasts_tailwind:config_file:'tailwind.config.js'

If you include any other files containing CSS classes that are located outside ofthe default directories, for example, in thevendor/ directory like theTailwind CSS form theme from thesymfony/twig-bridge package, then after changing your Twig configuration:

1234

# config/packages/twig.yamltwig:form_themes:-'tailwind_2_layout.html.twig'

You will have to add them to yourtailwind.config.js file:

12345678

# tailwind.config.js  module.exports = {      content: [          "./assets/**/*.js",          "./templates/**/*.html.twig",+         "./vendor/symfony/twig-bridge/Resources/views/Form/*.html.twig",      ],  }

Using a Different Binary

The standalone Tailwind binary comes with first-party plugins. However,if you want to add extra plugins, you may choose to install Tailwind vianpm instead:

1

$npm add tailwindcss

To instruct the bundle to use that binary instead, set thebinary option:

123

# config/packages/symfonycasts_tailwind.yamlsymfonycasts_tailwind:binary:'node_modules/.bin/tailwindcss'

Using a Different Binary Version

To use a different version, adjust thebinary_version option:

123

# config/packages/symfonycasts_tailwind.yamlsymfonycasts_tailwind:binary_version:'v3.3.0'

Using a PostCSS config file

If you want to use additional PostCSS plugins, you can specify thePostCSS config file to use, setpostcss_config_file option orpass the--postcss option to thetailwind:build command.

123

# config/packages/symfonycasts_tailwind.yamlsymfonycasts_tailwind:postcss_config_file:'postcss.config.js'

1

$php bin/console tailwind:build --postcss='postcss.config.js'