Tailwind CSS for Symfony！

安裝

安裝套件並用兩個指令初始化您的應用程式

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 表單看起來更美觀，您需要專用的表單主題。請查看 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'