Tailwind CSS 主頁
  1. 安裝
  2. 使用 Symfony 安裝 Tailwind CSS

  1. 建立專案

    如果你還沒有設定好，請先建立一個新的 Symfony 專案。最常見的方法是使用 Symfony 安裝程式。

    終端機
    symfony new --webapp my-projectcd my-project

  2. 安裝 Webpack Encore

    安裝 Webpack Encore，它負責建立你的資產。請參閱 文件 以取得更多資訊。

    終端機
    composer require symfony/webpack-encore-bundle

  3. 安裝 Tailwind CSS

    使用 npm 安裝 tailwindcss 及其對等相依項，以及 postcss-loader，然後執行 init 指令來產生 tailwind.config.js 和 postcss.config.js。

    終端機
    npm install -D tailwindcss postcss postcss-loader autoprefixernpx tailwindcss init -p

  4. 啟用 PostCSS 支援

    在您的 webpack.config.js 檔案中，啟用 PostCSS Loader。請參閱 文件 以取得更多資訊。

    webpack.config.js
    Encore
  // ...
  .enablePostCssLoader()
;

  5. 設定您的範本路徑

    在您的 tailwind.config.js 檔案中加入所有範本檔案的路徑。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  6. 將 Tailwind 指令加入您的 CSS

    將每個 Tailwind 層的 @tailwind 指令加入您的 ./assets/styles/app.css 檔案。

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  7. 開始您的建置程序

    使用 npm run watch 執行您的建置程序。

    終端機
    npm run watch

  8. 開始在您的專案中使用 Tailwind

    確保您的編譯 CSS 已包含在 <head> 中，然後開始使用 Tailwind 的公用程式類別來設定您的內容樣式。

    base.html.twig
    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
  {% endblock %}
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>