Tailwind CSS for Symfony!
Edit this pageThis 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.
Symfony CLI
If using the Symfony CLI, you can add build
command as a worker
to be started whenever you run symfony server:start
:
1 2 3 4 5 6
# .symfony.local.yaml
workers:
# ...
tailwind:
cmd: ['symfony', 'console', 'tailwind:build', '--watch']
Tip
If running symfony server:start
as a daemon, you can run
symfony server:log
to tail the output of the worker.
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
Form Theming
To make your Symfony forms look nice with Tailwind, you'll need a dedicated form theme. Check out https://github.com/tales-from-a-dev/flowbite-bundle for a helpful bundle that provides that!
Tailwind Plugins
The Tailwind binary the bundle downloads already contains the "Official Plugins" - e.g. typography.
This means you can use those simply by adding the line to the plugins
key in
tailwind.config.js
- e.g. require('@tailwindcss/typography')
.
For other plugins - like Flowbite Datepicker,
you will need to follow that package's documentation to require the package
with npm
:
1
$ npm install flowbite
Then add it to tailwind.config.js
:
1 2 3 4 5
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 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'
Another option is the config_file
option, which defaults to tailwind.config.js
.
This represents the Tailwind configuration file:
1 2 3
# config/packages/symfonycasts_tailwind.yaml
symfonycasts_tailwind:
config_file: 'tailwind.config.js'
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'
Using a Different Binary Version
By default the latest standalone Tailwind binary gets downloaded. However,
if you want to use a different version, you can specify the version to use,
set binary_version
option:
1 2 3
# config/packages/symfonycasts_tailwind.yaml
symfonycasts_tailwind:
binary_version: 'v3.3.0'