How to use Tailwind.css in Magento 2

Tailwind CSS is a modern, utility-first CSS framework that enables developers to build responsive and visually consistent user interfaces with minimal custom styling.

In Magento 2, integrating Tailwind CSS can significantly simplify frontend styling, especially when building custom features, modules, or UI components.

Whether you want to enhance performance, reduce unused CSS, or maintain a modular design approach, Tailwind provides a flexible and efficient solution.

This output file is a static CSS asset that contains styles strictly used in your templates, resulting in a smaller and more optimized stylesheet.

By eliminating unused CSS, Tailwind improves frontend performance and keeps styling lightweight, which is especially beneficial for modular architectures like Magento 2 custom modules.

Work with Tailwind CSS from scratch via CLI command:

Install npm and set up its environment. Then install Tailwind CSS via the command line:

npm install -D tailwindcss@3

Now check the presence of Tailwind in your environment via the command line :

npm info tailwindcss version

The above command will give you the stable version of the installed Tailwind CSS.

Now, how to use Tailwind in a custom plugin in Magento.

Create a custom module in Magento 2. After that, create the configuration file for Tailwind inside the js directory for any scope. This can be achieved via the command line.

npx tailwindcss init app/code/Webkul/TailwindTest/view/frontend/web/js/tailwindcss-config.js

This will create the tailwindcss-config.js file in the JS directory in the front-end scope.

This file provides the path of the template files for the content key:

Now, manage the classes in the template files:

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>
<br>
<button class="text-white font-semibold bg-blue-500 hover:bg-blue-700
               border-blue-700 border-b hover:border-indigo-900 
               transition-all px-6 py-2 rounded-full">
  Click To Wonder!
</button>
<br><br><br>
<h1 class="text-3xl font-bold underline">
    Content Display
</h1>
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" 
  src="<?= $this->getViewFileUrl('Webkul_TailwindTest::images/img.jpg');?>" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        John Doe
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Software Engineer, XYZ
      </div>
    </figcaption>
  </div>
</figure>

Now, create the input.css file in view/frontend/web/css/input.css. And write the content below.

@tailwind base;

@tailwind components;

@tailwind utilities;

This file contains the @tailwind directives that will place each of Tailwind’s layers into your main CSS file.

After processing all configured templates, Tailwind generates a final output file that contains the corresponding CSS styles.

For this run, the CLI command

npx tailwindcss -c app/code/Webkul/TailwindTest/view/frontend/web/js/tailwindcss-config.js -i app/code/Webkul/TailwindTest/view/frontend/web/css/input.css -o app/code/Webkul/TailwindTest/view/frontend/web/css/output.css

It generates the output.css at app/code/Webkul/TailwindTest/view/frontend/web/css/output.css

The content displayed in the snapshot is automatically minified and generated using command-line tools.

npx tailwindcss -o app/code/Webkul/TailwindTest/view/frontend/web/css/output.css --minify

Now we can use this CSS inside the layout file as managed via Magento.

Now run the front-end on route test/test/index, corresponding to the layout:

For more reference, https://tailwindcss.com/docs/installation

If you require technical support, feel free to email us at support@webkul.com

Additionally, explore a wide array of solutions to boost your store’s capabilities by visiting our Adobe Commerce modules section and Adobe Commerce marketplace addons.

Or looking to improve your store’s speed and overall performance? Check out our Magento 2 Speed & Optimization services.

Get expert support and build customized solutions by hiring skilled Adobe Commerce developers for your project.

Thanks & Happy Coding!