Tailwind CSS for Symfony!
Edit this pageTailwind CSS for Symfony!
This bundle makes it easy to use Tailwind CSS with Symfony's AssetMapper Component (no Node required!).
- Automatically downloads the correct standalone Tailwind CSS binary;
- Adds a
tailwind:build
command to build & watch for changes; - Transparently swaps in the compiled CSS.
Note
Want to use Tailwind CSS with WebpackEncore instead? Check out the Tailwind + Symfony Docs.
Installation
Install the bundle & initialize your app with two commands:
1 2
$ composer require symfonycasts/tailwind-bundle
$ php bin/console tailwind:init
Done! This will create a tailwind.config.js
file and make sure your
assets/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) in base.html.twig
. It's quite likely
you already have this:
1 2 3 4 5
{# templates/base.html.twig #}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}
The bundle works by swapping out the contents of styles/app.css
with the
compiled CSS automatically. For this to work, you need to run the tailwind:build
command:
1
$ php bin/console tailwind:build --watch
That's it! This will watch for changes to your assets/styles/app.css
file
and automatically recompile it when needed. If you refresh the page, the
final app.css
file will already contain the compiled CSS.
How Does It Work?
The first time you run one of the Tailwind commands, the bundle will
download the correct Tailwind binary for your system into a var/tailwind/
directory.
When you run tailwind:build
, that binary is used to compile
your CSS file into a var/tailwind/tailwind.built.css
file. Finally,
when the contents of assets/styles/app.css
is requested, the bundle
swaps the contents of that file with the contents of var/tailwind/tailwind.built.css
.
Nice!
Deploying
When you deploy, run the tailwind:build
command before the asset-map:compile
command so the built file is available:
1 2
$ php bin/console tailwind:build --minify
$ php bin/console asset-map:compile
Configuration
To see the full config from this bundle, run:
1
$ php bin/console config:dump symfonycasts_tailwind
The main option is input_css
option, which defaults to assets/styles/app.css
.
This represents the "source" Tailwind file (the one that contains the @tailwind
directives):
1 2 3
# config/packages/symfonycasts_tailwind.yaml
symfonycasts_tailwind:
input_css: 'assets/styles/other.css'
Using a Different Binary
The standalone Tailwind binary comes with the first-party plugins. However, if you want to add extra plugins, you may choose to install Tailwind via npm instead:
1
$ npm add tailwindcss
To instruct the bundle to use that binary instead, set the binary
option:
1 2 3
# config/packages/symfonycasts_tailwind.yaml
symfonycasts_tailwind:
binary: 'node_modules/.bin/tailwindcss'