安装
在 Symfony 项目中设置 Tailwind CSS。
首先创建一个新的 Symfony 项目,如果你还没有设置项目。最常见的方法是使用 Symfony 安装器.
symfony new --webapp my-projectcd my-project
安装 Webpack Encore,它负责构建你的资源。请参阅 文档 以获取更多信息。
composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundlecomposer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle
使用 npm,安装 @tailwindcss/postcss
及其对等依赖项,以及 postcss-loader
.
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader
在你的 webpack.config.js
文件中,启用 PostCSS Loader。请参阅 文档 以获取更多信息。
Encore .enablePostCssLoader();
在你的项目根目录下创建一个 postcss.config.mjs
文件,并添加 @tailwindcss/postcss
插件到你的 PostCSS 配置中。
export default { plugins: { "@tailwindcss/postcss": {}, },};
添加一个 @import
到 ./assets/styles/app.css
,用于导入 Tailwind CSS。
@import "tailwindcss";
使用 npm run watch
运行你的构建过程。
npm run watch
确保你的编译后的 CSS 包含在 <head>
中,然后开始使用 Tailwind 的实用类来设置你的内容样式。
<!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>