{"id":3671,"date":"2024-10-25T07:30:00","date_gmt":"2024-10-25T07:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-use-tailwind-css-in-magento-2-step-by-step-guide\/"},"modified":"2025-03-17T04:35:14","modified_gmt":"2025-03-17T04:35:14","slug":"how-to-use-tailwind-css-in-magento-2-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-use-tailwind-css-in-magento-2-step-by-step-guide\/","title":{"rendered":"How to Use Tailwind.css in Magento 2? – Step-by-step Guide"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

In this tutorial, I will show how you can use Tailwind CSS in Magento 2.<\/p>\n\n\n\n

What is Tailwind CSS?<\/h2>\n\n\n\n

It’s an open-source CSS framework used for developing fast and responsive websites.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Method to Install & Use Tailwind CSS in Magento 2<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Follow these steps one by one to use Tailwind CSS in Magento 2:<\/p>\n\n\n\n

Step 1: Install Tailwind CSS<\/h3>\n\n\n\n

First, navigate to your Magento installation directory by using the command:<\/p>\n\n\n\n

cd path\/to\/your\/magento\/theme<\/code><\/pre>\n\n\n\n
Now, initialize a new Node.js project:<\/p>\n\n\n\n
npm init -y<\/code><\/pre>\n\n\n\n
Run the following command to install Tailwind.css:<\/p>\n\n\n\n
npm install tailwindcss<\/code><\/pre>\n\n\n\n
This will install the Tailwind CSS on your system.<\/p>\n\n\n\n
Step 2: Configure Tailwind CSS<\/h3>\n\n\n\n
Once the Tailwind CSS is installed, run the following command to create a tailwind.config.js file:<\/p>\n\n\n\n
npx tailwindcss init<\/code><\/pre>\n\n\n\n
Now, open the generated tailwind.config.js file and include paths to all of your Magento theme files. This will <\/p>\n\n\n\n
module.exports = {\n  purge: [\n    '.\/app\/**\/*.html',\n    '.\/app\/**\/*.php',\n    '.\/app\/**\/*.phtml',\n    '.\/app\/**\/*.js',\n  ],\n  darkMode: false,\n  theme: {\n    extend: {},\n  },\n  variants: {\n    extend: {},\n  },\n  plugins: [],\n}<\/pre>\n\n\n\n
In production, this will help remove the unwanted Tailwind classes that are not used in any of these files.<\/p>\n\n\n\n
Step 3: Create Tailwind CSS File<\/h3>\n\n\n\n
In your theme directory, create a new file at src\/styles\/tailwind.css with the following code:<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/pre>\n\n\n\n
This will import Tailwind’s base styles, components, and utilities.<\/p>\n\n\n\n
Step 4: Build Tailwind CSS<\/h3>\n\n\n\n
Now, add the following script to your package.json file:<\/p>\n\n\n\n
\"scripts\": {\n  \"build:css\": \"tailwindcss build src\/styles\/tailwind.css -o web\/css\/tailwind.css\"\n}<\/pre>\n\n\n\n
Run the following build command:<\/p>\n\n\n\n
npm run build:css<\/code><\/pre>\n\n\n\n
This will generate the tailwind.css file inside the web\/css\/ folder of your theme.<\/p>\n\n\n\n
Step 5: Include Tailwind CSS in Magento<\/h3>\n\n\n\n
Now, you can include Tailwind CSS in your Magento theme files and deploy it.<\/p>\n\n\n\n
Open your theme\u2019s layout\/default_head_blocks.xml file and add the following to refer to the Tailwind.css file inside the <head>…..<\/head> section:<\/p>\n\n\n\n
<css src=\"css\/tailwind.css\"\/><\/pre>\n\n\n\n
Once done, you can run the following deployment command:<\/p>\n\n\n\n
php bin\/magento setup:static-content:deploy<\/code><\/pre>\n\n\n\n
This will ensure that the added Tailwind.css in Magento 2 is ready to use.<\/p>\n\n\n\n
Step 6: Use Tailwind CSS in Magento 2<\/h3>\n\n\n\n
Now you can use Tailwind classes in your Magento theme templates (e.g., .phtml files).<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
<div class=\"bg-blue-500 text-white p-4\">\n   Tailwind CSS is working!\n<\/div><\/pre>\n\n\n\n
Optional Step: Enable Hot-reloading for Development<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
To see the changes immediately, you can use hot-reloading using tools like live-server. To enable hot-reloading, follow these steps:<\/p>\n\n\n\n
Install live-server using this command:<\/p>\n\n\n\n
npm install -g live-server<\/code><\/pre>\n\n\n\n
Go to your Magento theme directory and run live-server using this command:<\/p>\n\n\n\n
live-server<\/code><\/pre>\n\n\n\n
This will enable hot-reloading, by looking for any changes in the core files and reloading the browser.<\/p>\n\n\n\n
Start Customizing Magento Theme with Tailwind CSS<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
You’re now all set to design a fast, responsive, and beautiful storefront using Tailwind Magento 2!<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-3671","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=3671"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3671\/revisions"}],"predecessor-version":[{"id":5596,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3671\/revisions\/5596"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}