Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • SensioLabs Professional services to help you with Symfony
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by SensioLabs
  1. Home
  2. Documentation
  3. Bundles
  4. TailwindBundle
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Installation
  • Usage
  • How Does It Work?
  • Deploying
  • Configuration
  • Using a Different Binary

Tailwind CSS for Symfony!

Edit this page

Tailwind 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'
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.
TOC
    Version
    We stand with Ukraine.
    Version:
    Take the exam at home

    Take the exam at home

    Code consumes server resources. Blackfire tells you how

    Code consumes server resources. Blackfire tells you how

    Symfony footer

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of Simon Schubert, a Symfony contributor

    Thanks Simon Schubert (@simon-schubert) for being a Symfony contributor

    1 commit • 21 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony

    Search by Meilisearch