How to Use Tailwind.css in Magento 2?

If you’re customizing a Magento theme, Tailwind CSS could be an excellent choice to use. It can help you speed up the development and maintain consistency amongst different elements.

In this tutorial, I will show how you can use Tailwind CSS in Magento 2.

What is Tailwind CSS?

It’s an open-source CSS framework used for developing fast and responsive websites.

Tailwind offers ready-made classes to apply styles to different elements. You can use it to design a Magento theme with consistent styling across elements with less coding.

Method to Install & Use Tailwind CSS in Magento 2

To get started with Magento 2 Tailwind CSS, you first need to install and configure it. Then, you can build Tailwind CSS and include it in the Magento theme files.

Follow these steps one by one to use Tailwind CSS in Magento 2:

Step 1: Install Tailwind CSS

First, navigate to your Magento installation directory by using the command:

cd path/to/your/magento/theme

Now, initialize a new Node.js project:

npm init -y

Run the following command to install Tailwind.css:

npm install tailwindcss

This will install the Tailwind CSS on your system.

Step 2: Configure Tailwind CSS

Once the Tailwind CSS is installed, run the following command to create a tailwind.config.js file:

npx tailwindcss init

Now, open the generated tailwind.config.js file and include paths to all of your Magento theme files. This will

module.exports = {
  purge: [
    './app/**/*.html',
    './app/**/*.php',
    './app/**/*.phtml',
    './app/**/*.js',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

In production, this will help remove the unwanted Tailwind classes that are not used in any of these files.

Step 3: Create Tailwind CSS File

In your theme directory, create a new file at src/styles/tailwind.css with the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

This will import Tailwind’s base styles, components, and utilities.

Step 4: Build Tailwind CSS

Now, add the following script to your package.json file:

"scripts": {
  "build:css": "tailwindcss build src/styles/tailwind.css -o web/css/tailwind.css"
}

Run the following build command:

npm run build:css

This will generate the tailwind.css file inside the web/css/ folder of your theme.

Step 5: Include Tailwind CSS in Magento

Now, you can include Tailwind CSS in your Magento theme files and deploy it.

Open your theme’s layout/default_head_blocks.xml file and add the following to refer to the Tailwind.css file inside the <head>…..</head> section:

<css src="css/tailwind.css"/>

Once done, you can run the following deployment command:

php bin/magento setup:static-content:deploy

This will ensure that the added Tailwind.css in Magento 2 is ready to use.

Step 6: Use Tailwind CSS in Magento 2

Now you can use Tailwind classes in your Magento theme templates (e.g., .phtml files).

For example:

<div class="bg-blue-500 text-white p-4">
   Tailwind CSS is working!
</div>

Optional Step: Enable Hot-reloading for Development

If you’re developing the Magento 2 theme using Tailwind CSS, you may need to manually rebuild and refresh the browser every time you update the code.

To see the changes immediately, you can use hot-reloading using tools like live-server. To enable hot-reloading, follow these steps:

Install live-server using this command:

npm install -g live-server

Go to your Magento theme directory and run live-server using this command:

live-server

This will enable hot-reloading, by looking for any changes in the core files and reloading the browser.

Start Customizing Magento Theme with Tailwind CSS

That’s it — you can follow the steps above to start using Tailwind CSS to customize your Magento 2 theme. You can also modify the tailwind.config.js file to further customize the default styles for various elements in Tailwind.

You’re now all set to design a fast, responsive, and beautiful storefront using Tailwind Magento 2!