The new version of Tailwind is even sweeter then the original. Read up on the new v2 version here. Or continue to the no-nonsense guide to using Tailwind CSS v2 in your Symfony 5 project.
Make sure webpack encore is installed:
composer req webpackIn the path of your Symfony project run:
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-loader@^5.3.0Create a postcss.config.js file in your project root:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}Enable PostCSS in your webpack.config.js:
...
.enablePostCssLoader()
...Add Tailwind CSS to your css files (assets/styles/app.css) and use it:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-gray-100;
}Compile your assets:
yarn encore devUse it in your twig templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}
</head>
<body>
<h1 class="text-4xl text-center p-5">Winning!</h1>
{% block body %}{% endblock %}
{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}
</body>
</html>
4 replies on “Tailwind CSS v2 in Symfony 5”
Just what I was looking for! Thanks! You might be missing postcss-loader thought
Hi, thanks for your reply. The postcss loader is enabled in webpack.config.js (see above).
Yes, the loader is enabled, but it also mus be installed. Running “yarn encore dev” gave me this error:
Error: Install postcss-loader to use enablePostCssLoader()
yarn add postcss-loader@^5.0.0 –dev
After installing the postcss-loader everything was fine 🙂
Hah right. Thanks 😊
Added the package.