How to Install Tailwind 3 in Symfony 6 | Tailwind 3 Setup | Symfony 6 for Beginners

This video will show you how you can add Tailwind 3 in a Symfony 6 project - Want to learn an incredible open-source PHP framework? Symfony is one of the most popular frameworks when you need to build high-performance & complex web applications.

📚 New Udemy Course

📲 Let’s plan a meeting

💌 Newsletter

🔥 Resources

Want to learn more?

📋 Table of Content
00:00 - Introduction
02:26 - Create & Edit Configuration File
06:42 - Adding Tailwind Directives
07:29 - Compiling the right file extensions
08:50 - Compiling your Tailwind
10:26 - How new classes are being added

#symfony #framework #symfony6 #php

[shoboske]

These are one of the best tutorials ever!

[VipapkStudiosOfficial]

Absolutely am loving all these Symfony tutorials! :)

[YassineNDv]

If you re not seeing any changes, make sure after all the configuration and specially after running te lat npx cmd to build the app.css in build folder, run a npm run dev.

some of you guys might have an issue with the autofixer, just install it with -D flag and after that run the npm run dev or watch

[peterab]

Hi, what do u like more? laravel or symphony

[dominikthurau]

I like the video and everything is working, but aren't you just using the tailwind cli-tool? Do you really need the postcss and encore configuration? I removed those steps and it is still working for me.

[manguitodelicioso]

Hi Dary, I have a couple of questions.
Is it possible to achieve the same by installing Bootstrap?
The other thing is that I don't quite understand what is the advantage of compiling css or js files. What I notice is that you get more files to work with, and that new changes made to the original app.css file, for example, can be immediately displayed on the screen without compiling the file in question.
Thanks for the good tutorials.

[jacob]

can tailwind classes be applied on content returned from controller to the template?

[manguitodelicioso]

When I finished writing the code from this tutorial, I wasn't getting the changes after applying the tailwind css classes in the h1 tag of the index.html.twig file, so after checking documentation here and there, I could figured out a way to solve the problem and got things running.

First, installed autoprefixer by running: npm install -D autoprefixer

Second, I had to do some edit in tailwind.config.js file, line 4

// the template will be generated in html format with the twig engine.
changed: "./templates/**/*.html.twig",
(deleted curly braces, and replaced the comma, between html and twig by a dot )
instead of: "./templates/**/*.{html, twig}",

Third, compiled the files by running: npm run watch
Note: if you run the command: npx tailwindcss -i ./assets/styles/app.css -o ./public/build/app.css --watch
you'll get not changes either, because the paths in the command are wrong, it should be:
npx tailwindcss -i assets/styles/app.css -o public/build/app.css --watch
but even so, the command above, will only append automatically the css classes in the
public/build/app.css file when they are called previously from the index.html.twig file, but it won't
remove them automatically from the public/build/app.css file, as it should be, when they are previously
deleted in the index.html.twig file and while being rebuilt.
So my advice, just use command: npm run watch

Fourth, added the tailwind css classes into the h1 tag in index.html.twig file, refreshed the browser and voilà !!
Note: css classes used in the index.html.twig file were appended automatically in the public/build/app.css file, and
when I deleted them from the h1 tag of the index.html.twig file, the appended clases in public/build/app.css
were also automatically deleted.

Fifth and last, ctrl + c to stop "npm run watch"

That's all the magic of Tailwind, just-in-time, all the time.

[FresGamerMan]

Hello, I'm new to symfony and web frameworks as a whole. I'm confused as my base symfony project does not have a webpack file? Do you have a video showing how its set up?

[manguitodelicioso]

Hi Dary,
after adding these 3 lines of code in assets/styles/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
the file tab's indicates 3 problems
why is that ?

[paradislefebvre]

it would be nice to see what the base.html.twig looks like

[semantixpt]

HELP! Done everything as suggested, checked everything one hundred times, /public/app.css will only show what I have in assets/app.css, no tailwind injection, and also tailwind classes will not affect the output. Going crazy. What can be wrong if I'm following all the instructions? My code is absolutely the same, yet the results are not. I had a message that postcss-loader what too new (7.0.0), so I changed that to 6.0.0, run everything again. Nothing.

[leonannexe]

Thanks for the tutorial, but the JS doesn't work...

[christianhabermann]

To be honest, this feels totally overcomplicated and overengineered! Settings all these unintuive things inside config files that somehow do things, all that to use some CSS? Feels weird to me! But man i love your tutorials :)