使用 Symfony 安装 Tailwind CSS
在 Symfony 项目中设置 Tailwind CSS。
创建项目
如果还没有 Symfony 项目，先创建一个。最常见的做法是使用 Symfony Installer。
Terminal
shellsymfony new --webapp my-project
cd my-project安装 Webpack Encore
安装 Webpack Encore 以处理资源构建。更多信息见 文档。
Terminal
shellcomposer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle安装 Tailwind CSS
通过 npm 安装 @tailwindcss/postcss 及其对等依赖，以及 postcss-loader。
Terminal
shellnpm install tailwindcss @tailwindcss/postcss postcss postcss-loader启用 PostCSS 支持
在 webpack.config.js 中启用 PostCSS Loader。更多信息见 文档。
webpack.config.js
jsEncore
.enablePostCssLoader()
;配置 PostCSS 插件
在项目根目录创建 postcss.config.mjs 文件，并将 @tailwindcss/postcss 插件加入 PostCSS 配置。
postcss.config.mjs
jsexport default {
plugins: {
"@tailwindcss/postcss": {},
},
};导入 Tailwind CSS
在 ./assets/styles/app.css 中添加 @import 以导入 Tailwind CSS，并添加 @source 忽略 public 目录，以免在 watch 模式下出现重复编译循环。
app.css
css@import "tailwindcss";
@source not "../../public";启动构建
使用 npm run watch 运行构建流程。
Terminal
shellnpm run watch在项目中使用 Tailwind
确保已编译的 CSS 包含在 <head> 中，然后使用 Tailwind 的工具类为内容添加样式。