How to apply Tailwind CSS to your [Shopify] store

In this article, I will write about how to apply Tailwind, which is a hot topic these days, to Shopify stores.

To tell you the truth, I am not yet familiar with the Shopify CLI, so I will use the theme kit and npm to apply Tailwind in this article.

What is Tailwind CSS?

First, a brief explanation of what Tailwind CSS is.

Tailwind utilizes a utility-first approach, which has the advantage of making CSS styling very efficient once you get used to it.

For example, if you are developing a Shopify store, you will naturally have the opportunity to edit CSS, but when you finally look back at the CSS file, you may find that you have edited the same style many times, or that there are classes that can be shared, etc. Styling in CSS files is often wasteful. The result was that the number of users tended to increase.

However, using a library such as Tailwind, a class "bg-white" can be attached to an HTML element to make the background white. bg-black" makes the background black, and so on. The concept is as follows. (It sounds a bit like Bootstrap.)

And since Tailwind seems to be highly compatible with React, I personally think it will be used more and more in Shopify store development in the future!

How to apply Tailwind CSS to your Shopify store

Let's start writing about the procedure for applying Tailwind CSS to the Shopify store.

We will proceed on the assumption that Theme kit and npm are already installed, so if you have not set them up yet, we recommend that you get Theme kit and npm working first. （If you have not yet set up Theme kit and npm, we recommend that you get Theme kit and npm up and running first.)

First, open a terminal and go to the theme folder of the store in question and theme watch.

theme watch -e "development (name set in config.yml)"

Then reopen the terminal in a new window and go to the theme folder of the corresponding store. In the newly opened terminal, create the package.json file. If you already have a package.json file, you can skip this step.

npm init -y

The package.json file is now created as shown below.

Installation and configuration of Tailwind CSS

Next, install Tailwind CSS.

npm install -D tailwindcss

npx tailwindcss init

in a terminal.

Now tailwind is installed, and if the file tailwind.config.js is generated, you have succeeded!

Rewrite the settings in the above tailwind.config.js file to specify the file to be applied.

and add the following.

By the way, "prefix" is an instruction to put "tw-" in front of the tailwind class. Using this prefix will prevent conflicts with existing CSS!

Create tailwind CSS folder

Next, create a folder named "css" and create a file named "tailwind.css" under it.

Paste the following text into the file.

It will look something like this

Configuration of the package.json file

Next, in the package.json file

"build": "npx tailwindcss -i css/tailwind.css -o assets/tailwind.css.liquid"

Add a line that says It is assumed to look like the following

Now we're all set!

Go back to the terminal.

npm run build

When you run the

The "tailwind.css.liquid" was created in the asset folder! Congratulations!

Finally, load this file on theme.liquid.

Now, for example, if you want to make the font bold, just add the class "tw-font-semibold" to the HTML element and set the font-wieght to 600!

Very, very useful!

Tailwind class names can be found below, so please experiment with them.

https://tailwindcss.com/docs/aspect-ratio

Using Tailwind CSS for Shopify Store Development Summary

That's all about applying Tailwind CSS to your Shopify store! I got the impression that it would be easier to use than expected and that development would proceed at a blistering pace once I got used to it.

I would also like to use React in the future, so it would not be a bad idea to study tailwind, which seems to have a high affinity with React, so I would like to study it as well.

Thank you very much for reading to the end! Have a great day!