Symfony Tailwind Bundle

https://symfony.com/bundles/TailwindBundle/current
Admin
A Symfony bundle that integrates Tailwind CSS with Symfony's AssetMapper component, enabling easy...
Tokens:2,082
Snippets:36
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### 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 %}
    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}
```
Tokens:
Raw