Categories
PHP

Tailwind CSS v2 in Symfony 5

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 webpack

In 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.0

Create 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 dev

Use 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>

Further reading

Tailwind CSS
Webpack Encore

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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *