Optimizing CSS in a Symfony application, with Tailwind or PurgeCSS

Greetings 🙂,

At the end of my last article, I told you that I would go further on CSS optimization. Except that in the meantime, things have changed a bit...

Originally, this week's article wasn't the one that was planned.

And yes, the basic article was "how to use Tailwind with Symfony", but the program has changed.
I'll explain why:

I don't know how to make a simple project like a "Todo List" or a "hello world", simply because I keep asking myself "but what's the point?" when I code, so I always try to create useful things when I try new technologies :

• This website and the Marchand site: The first time I coded a CMS, putting into it all the knowledge I'd accumulated over the last 10 years about SEO. That's what these projects are all about, getting displayed on Google.
• The online cheese shop: The first time I used Sylius, to which I added my stuff to enable it to rank well on Google.
• Restaurant reservation application: The first time I used Turbo and Stimulus in a Symfony project, then we took it a step further and got it on smartphone stores via "Turbo Native", today this app is in use and doing good service 🙂.

As you'll have gathered, every time I test a new technology, I try to create a useful project with it, and this time it's no exception to the rule, with Josselin, we're working on an app to find a bar according to your tastes and desires (what drink? are there aperitif boards?).
I'll come back to this project in future articles, don't worry 😁.

Initially, we wanted to use Tailwind to do this, but, since I've got a lot on my plate at the moment, we've done a retropedal and won't be using Tailwind, we'll be sticking with Bootstrap, and, we'll be using "PurgeCSS" on this project.

However, I've already worked on integrating Tailwind into the Symfony project, so there will still be a bit of Tailwind in this article (a lot, in fact).

Using Tailwind to optimize CSS

The Tailwind binary reads your HTML code and adds the classes you use, and only those classes, to the CSS file.

Two ways to integrate Tailwind into your Symfony project

With the TailwindBundle

The first method is to use the TailwindBundle.

For this method, I leave you to read the documentation, which you can find by clicking on the link above. This is not the solution I've chosen.

With "Webpack Encore

This is the solution I use myself. It gives me greater flexibility, allowing me to add things as I see fit ... In short, I prefer this solution.

The first step is to install the "WebpackEncoreBundle".

Once this is done, you'll need to install Tailwind with "npm", then initialize it.

In your webpack.config.js configuration, activate "enablePostCssLoader", as shown in the file below:

Once you've done this, configure the "tailwind.config.js" file, which will allow you to define where your project's JavaScript and HTML are located. Tailwind will then read these files and extract the CSS classes you're using.

In a Symfony project, our Twig files contain our HTML in "./templates/**/*.html.twig", and the files containing JavaScript (which may therefore contain CSS classes), which are located in "./assets/**/*.js".
(the two stars mean that there may be one or more folders in this location).

Import Tailwind into your CSS :

Finally, of course, you need to remember to import the result into your "base.html.twig" file:

This file may not be called "base.html.twig" for you, or you may have called it something else, but the idea is simply to add the import to your "head" tag.

Finally, you can test your integration with :

Then you can take advantage of Tailwind in your Symfony project.

Tailwind and component classes

By default, Tailwind only offers utility classes, i.e., no "btn" or "card", as you might find in a framework like Bootstrap, but don't worry, there's a solution to that.

There are plugins or "presets" that will enable you to rediscover the simplicity of Bootstrap's "btn", the best known being Daisy UI.

To install it, use the command below:

Once installed, add the plugin to your tailwind.config.js :

It's very simple: just add the plugin to the "plugins" table.

Now you can access Daisy UI components directly, just use the classes in your HTML and Tailwind will import only the classes you use.

Using PurgeCSS to optimize CSS

After Tailwind, let's see how to optimize your CSS, but with any other framework, like Bootstrap, for example.

PurgeCSS does much the same as Tailwind: it looks at the CSS generated, looks at your HTML files and creates a CSS file containing only the classes used (and therefore deleting all unnecessary classes).

We'll need the "WebpackEncoreBundle" again, as with Tailwind:

Once the bundle is installed, we install PurgeCSS and PostCSS :

All that's left is to configure the "postcss.config.js" file at the root of your project:

And here, if you've read the section on Tailwind, you should see a little family resemblance, as we're going to look for our HTML and JavaScript in the same folders.

Don't forget to add "enablePostCssLoader" to your "webpack.config.js" file, the same file as in the Tailwind section:

A simple "npm run watch" is all it takes, and your CSS will be optimized by PurgeCSS.

In development, you may wish to comment "enablePostCssLoader" in your "webpack.config.js" file, to speed up the build time of your assets.

Conclusion

From an article that would normally focus solely on Tailwind, we end up with an article that talks about Tailwind, and, for those who wish to stick to another CSS framework (or no framework at all) can also optimize their CSS right from the design stage of their Symfony applications.

See you soon for another article, see you soon 😁.