Symfony 的 Tailwind CSS！

安装

安装扩展包并使用两个命令初始化您的应用

1
2

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

完成！这将创建一个 tailwind.config.js 文件，并确保您的 assets/styles/app.css 包含 Tailwind 指令。

用法

要使用 Tailwind CSS 文件，首先在 base.html.twig 中包含输入文件（默认情况下为 assets/styles/app.css）。您很可能已经有了这个

1
2
3
4
5

{# templates/base.html.twig #}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}

此扩展包的工作原理是自动将 styles/app.css 的内容替换为已编译的 CSS。为了使其正常工作，您需要运行 tailwind:build 命令

1

$ php bin/console tailwind:build --watch

就是这样！这将监视对您的 assets/styles/app.css 文件的更改，并在需要时自动重新编译它。如果您刷新页面，最终的 app.css 文件将已经包含已编译的 CSS。

1

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

1
2
3
4
5
6

# .symfony.local.yaml
workers:
    # ...

    tailwind:
        cmd: ['symfony', 'console', 'tailwind:build', '--watch']

它是如何工作的？

首次运行 Tailwind 命令之一时，此扩展包会将适用于您系统的正确 Tailwind 二进制文件下载到 var/tailwind/ 目录中。

当您运行 tailwind:build 时，该二进制文件用于将每个 CSS 文件编译为 var/tailwind/<filename>.built.css 文件。最后，当请求 CSS 文件的内容时，此扩展包会将该文件的内容与 var/tailwind/<filename>.built.css 的内容交换。

例如：对 assets/styles/app.css 的请求将被 var/tailwind/app.built.css 替换。真棒！

部署

部署时，在 asset-map:compile 命令之前运行 tailwind:build 命令，以便构建的文件可用

1
2

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

表单主题

要使您的 Symfony 表单在 Tailwind 中看起来不错，您需要一个专用的表单主题。请查看 https://github.com/tales-from-a-dev/flowbite-bundle，以获取提供该功能的有用扩展包！

Tailwind 插件

此扩展包下载的 Tailwind 二进制文件已经包含“官方插件” - 例如 typography。这意味着您只需将该行添加到 tailwind.config.js 中的 plugins 键即可使用它们 - 例如 require('@tailwindcss/typography')。

对于其他插件 - 例如 Flowbite Datepicker，您需要按照该包的文档使用 npm require 该包

1

$ npm install flowbite

然后将其添加到 tailwind.config.js

1
2
3
4
5

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

配置

要查看此扩展包的完整配置，请运行

1

$ php bin/console config:dump symfonycasts_tailwind

主要选项是 input_css 选项，默认值为 assets/styles/app.css。这表示“源”Tailwind 文件（包含 @tailwind 指令的文件）

1
2
3

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

可以通过提供数组来使用多个输入文件

1
2
3
4
5

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

另一个选项是 config_file 选项，默认值为 tailwind.config.js。这表示 Tailwind 配置文件

1
2
3

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

如果您包含任何其他包含 CSS 类并且位于默认目录之外的文件，例如，位于 vendor/ 目录中，如来自 symfony/twig-bridge 包的 Tailwind CSS 表单主题，则在更改 Twig 配置后

1
2
3
4

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

您将必须将它们添加到您的 tailwind.config.js 文件中

1
2
3
4
5
6
7
8

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

使用不同的二进制文件

独立的 Tailwind 二进制文件附带了第一方插件。但是，如果您想添加额外的插件，您可以选择通过 npm 安装 Tailwind

1

$ npm add tailwindcss

要指示扩展包使用该二进制文件，请设置 binary 选项

1
2
3

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

使用不同的二进制文件版本

默认情况下，将下载最新的独立 Tailwind 二进制文件。但是，如果您想使用不同的版本，可以指定要使用的版本，设置 binary_version 选项

1
2
3

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

使用 PostCSS 配置文件

如果您想使用其他 PostCSS 插件，您可以指定要使用的 PostCSS 配置文件，设置 postcss_config_file 选项，或者将 --postcss 选项传递给 tailwind:build 命令。

1
2
3

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

1

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