Using Tailwind CSS in Magento 2: A Step-by-Step Guide

Before we discuss how to use Tailwind CSS in Magento 2, let’s understand what it is and why use it.

What is Tailwind CSS?

It is a utility first CSS framework designed to modernise website design and development. The different between Tailwind and other frameworks is that it does not provide pre-defined elements for classes. Instead, it does the complete opposite by offering a list of pre-designed utility classes that you can use to create an engaging website. In Magento 2’s case, you can create a compelling theme with consistent styling without investing too much time or resources on coding.

Benefits of Using Tailwind CSS

It offers numerous benefits, including:

• Flexibility

Bootstrap provides the users with predefined classes for various elements, such as buttons. This means that the user will have to select one from the predefined class, making it challenging to design a unique website. In contrast, Tailwind CSS does not impose such restrictions. The user is in complete control of the design process.

• Consistency

All of us of have seen websites where the font, colouring, or spacing was inconsistent. What was our reaction? Naturally, such a design contributes to negative user experience. By using utility classes in Tailwind CSS, the user ensures consistency throughout the website.

• Small Size

When building for production, Tailwind automatically removes all unused CSS files. This speeds up the website loading process and can improve your store’s search ranking.

• Productivity

Developers can implement styles directly in HTML, thereby saving valuable time and effort.

• Customisation

You can customise each aspect of the website using the tailwind.config.js file and Tailwind will then convert it into your very own CSS framework.

How to Install Tailwind CSS in Magento 2

Step 1:

First go to your Magento 2 root terminal and type in the following command:

cd /path/to/your/magento/root

Step 2:

Now, install Tailwind CSS using the below command. But prior to doing so, ensure that Node.js and npm are already installed. If not, install them before typing in:

npm install tailwindcss postcss autoprefixer

Step 3:

Afterwards, create your ‘tailwind.config.js’ file by entering:

npx tailwindcss init

Step 4:

Edit the ‘tailwind.config.js’ file by

module.exports = {

  content: [

    './**/*.html',

    './**/*.phtml',

    './**/*.js',

    './**/*.css',

  ],

  theme: {

    extend: {},

  },

  plugins: [],

};

Step 5:

Then, in your theme directory, create a CSS file (e.g., src/styles.css) and add the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 6:

Create a postcss.config.js file in the theme directory with the following content:

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  },

};

Step 7:

Compile the Tailwind CSS: Run the following command to build the CSS file:

npx tailwindcss -i ./src/styles.css -o ./web/css/styles.css –watch

Go to web/css director since this is where the above command will generate the CSS file.

Step 8:

Update your theme's layout/default_head_blocks.xml to include the generated CSS file:

link src="css/styles.css" rel="stylesheet" 

Step 9:

Enable developer mode using:

php bin/magento deploy:mode:set developer

Step 10:

Deploy the static content by entering:

php bin/magento setup:static-content:deploy

Step 11:

Clear the cache by:

php bin/magento setup:static-content:deploy

Step 12:

This is the final step and involves verifying whether that the store utilises Tailwind styles. To do so, simply open a web browser and head to your Magento 2 store.

Conclusion

This concludes our article on how to use Tailwind CSS in your Magento 2 store. If you have any questions, reach out to our support team.

Read More Magento 2 Blogs:

• Fixing Permission Denied Error for bin/magento Command in Magento
• Magento 2 SEO Settings | A Practical & Easy Guide
• How to Add Custom Fields in Magento 2 Checkout Page Programmatically?