Recently, I came across Tailwind, a very interesting CSS framework that joins the group of other famous and well-known CSS frameworks such as Bootstrap, Foundation, W3.CSS, etc.
Tailwind is an Utility-First type framework, following the principle that we can do almost everything without writing a single CSS line to customize the appearance of the individual elements involved.
However, I do not want to speak further on the framework itself (if you want, you can learn more on the official website https://tailwindcss.com); I want to write instead a short guide about installing Tailwind on Symfony projects.
Those like me who usually work with this PHP framework might be interested in trying Tailwind, but its installation may not be so immediate, especially for beginners.

A necessary but not sufficient prerequisite for installing Tailwind on Symfony projects is Encore; for those who use (for example) Bootstrap simply importing the files (.css and .js) into the project, there are bad news: Tailwind does not support this method. We could use a CDN, but the framework functionality would suffer and we would turn down some very good and useful functions (no possibility to install third-party plugins, the default theme cannot be changed, etc.). For the Encore installation and its dependencies (Node.js - pay attention to the version - and Yarn), here the official Symfony documentation: https://symfony.com/doc/current/frontend/encore/installation.html.
If you've made it this far, I'll assume you have Encore installed. At this point, we can proceed with the Tailwind installation; we need three elements: PostCSS, Autoprefixer and Tailwind itself of course.
PostCSS is a tool that allows we to work on CSS via JavaScript; Autoprefixer is a PostCSS plugin that analyzes what is written in CSS and automatically adds the "vendor prefixes" to the declared CSS rules; it duplicates the rules by specifying the different browsers prefixes (eg: -webkit- for Chrome and Safari, -moz- for Firefox, -ms- for Internet Explorer, etc.). Tailwind, in this context, is a PostCSS plugin. This is the suggested approach in the official Tailwind documentation, however for those who do not want to configure PostCSS, Tailwind CLI is available; the installation procedure is different and I will not explain it here and now.
If everything is ok, we can proceed with the installation. We type (I use yarn, but you can also use npm):

yarn add tailwindcss postcss autoprefixer -D

After the first command, we continue with:

yarn add postcss-loader@^5.0.0 --dev

After that, we conclude with:

yarn add postcss-import

At this point, we need to manage the various configuration files.
The first file of interest is the one that configures Tailwind: tailwind.config.js. If it is not present in the project root, we create it, otherwise we make sure that the content is:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

In this file we can define all customizations we want to make (colors, fonts, spacing, etc.).
The second file is the PostCSS configuration file: postcss.config.js. Again, in the project root folder, if it exists we modify it as follows, otherwise we create it:

let tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'), //here we have to specify the path of the file defined above
        require('autoprefixer'),
        require('postcss-import')
    ]
}

The third file must be created in the assets/styles/ folder, under the root/: tailwind.css. Inside we write:

@tailwind base;

@tailwind components;

@tailwind utilities;

Finally, the last file is the Encore configuration file, which should already be present in the root: webpack.config.js.
We must add the following code block immediately after the .setPublicPath ('/ build') line already in there:

.addStyleEntry('tailwind', './assets/styles/tailwind.css') //the path is the tailwind.css path, the file defined above
    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            config: './postcss.config.js', //the path here is the PostCSS configuration file path
        };
    })

At this point, we have configured and installed everything necessary. We just have to compile the assets with yarn (or npm).

In order to use Tailwind, we need to add these lines in our Twig templates and files:

{{ encore_entry_link_tags('tailwind') }}
{{ encore_entry_script_tags('tailwind') }}

If we want to use it globally, it is useful to insert these lines in the base file which will be extended by all our templates; the first will be placed in the stylesheets block, while the second in the scripts block.

Now we can start experimenting, playing or simply working with the Tailwind framework, using all its features in a Symfony project.
For any doubts, questions and/or corrections, feel free to write me to the email you find in the homepage. I will be very happy to improve this guide with any suggestions you may have.