使用 Symfony 安装 Tailwind CSS

在 Symfony 项目中设置 Tailwind CSS。

创建你的项目

如果你还没有设置好项目，请先创建一个新的 Symfony 项目。最常见的方法是使用 Symfony 安装程序。

Terminal

symfony new --webapp my-projectcd my-project

Install Webpack Encore

安装 Webpack Encore，它负责构建你的资产。查看文档了解更多信息。

Terminal

composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundlecomposer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

安装Tailwind CSS

Using npm, install @tailwindcss/postcss and its peer dependencies, as well as postcss-loader.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

启用PostCSS支持

In your webpack.config.js file, enable the PostCSS Loader. See the documentation for more information.

webpack.config.js

Encore  .enablePostCssLoader();

Configure PostCSS Plugins

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

postcss.config.mjs

export default {  plugins: {    "@tailwindcss/postcss": {},  },};

Import Tailwind CSS

Add an @import to ./assets/styles/app.css that imports Tailwind CSS.

app.css

@import "tailwindcss";

Start your build process

Run your build process with npm run watch.

Terminal

npm run watch

Start using Tailwind in your project

Make sure your compiled CSS is included in the <head> then start using Tailwind’s utility classes to style your content.

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>