Jantu Deb's Blog

How to use Tailwind CSS with vanilla JS

Jantu Deb's photo
Jantu Deb
·

4 min read

What is Tailwind CSS

Tailwind is a utility-first CSS framework, which provides a set of helper classes. By using these classes we can create a layout rapidly. Using Tailwind CSS, you don't need to write different styles using media queries for different screen sizes. You can use Tailwind's responsive utilities to handle it easily.

Do we need to use Tailwind CSS?

So, It depends we can build a minimal prototype by using Tailwind very fast. The development time is very fast because it comes with plenty of utility classes for everything we need in a project. However, we can achieve this with vanilla CSS.

How to set up a project with Tailwind CSS

We can use npm to get started with Tailwind or we can use the Tailwind CSS CDN link, npm is the preferred way to install Tailwind.

We can start by creating a project folder, let's name it tailwind-sample. Now we can open this folder in VS code editor.

Now we need to create a package.json file by using the npm command in the following way.

$ npm init -y

Run this command in the terminal of your vs code editor. Now we can use npm to add a dependency to our project.

We start by installing Tailwind CSS using the following command.

$ npm install tailwindcss

This command will download tailwind CSS and save it to the node_modules folder.

We will create a css/style.css file and add this @tailwind directive to import Tailwind’s base, components, and utility styles.

@tailwind base;

@tailwind components;

@tailwind utilities;

The next step is to create an initial Tailwind configuration file by using the following command in the project folder.

$ npx tailwindcss init

This will create a tailwind.config.js in your root folder with the following content.

//tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now, we will use PostCSS as a build processor for tailwind also we need a additional plugin called autoprefixer.

Let's install PostCSS and autoprefixer by using following command.

$ npm install postcss autoprefixer@latest

Let's create a PostCSS configuration file named postcss.config.js in our project root folder.

We will add the following content in the newly created postcss.config.js file.

module.exports = {
    plugins: {
      tailwindcss: {},
     autoprefixer: {},
    }
}

With this, the PostCSS process will perform CSS processing with the tailwindcss and the autoprefixer plugins.

The last step is to create a build script to execute PostCSS processing for filecss/styles.css and it will create a build CSS file in the given location.

Let's add the following build command in our package.json file.

"build": "postcss css/styles.css -o build/styles.css"

To execute this script we need to run the following build command.

$ npm run build

So, we have successfully installed and configured Tailwind CSS for our project, now we can create HTML and start creating our layouts with Tailwind CSS.

Now create a index.html in root folder of our project and link the generated build/styles.css file to html.

Let's create a card layout using Tailwind CSS

<div class="w-64 rounded-lg shadow-lg text-center bg-indigo-600 text-white p-4">
    <h1 class="text-xl font-bold m-2">This is the card title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Aliquid amet quaerat eos! Doloremque molestiae voluptate, eos 
  architectoaccusantium atque voluptas sapiente vitae repellat 
  dolores saepe minima. Ratione mollitia magni saepe. </p>

    <button type="submit" class="bg-white text-blue-800 m-4 rounded-md p-2 hover:text-blue-700 hover:bg-gray-200">
    Clicked Me
    </button>
</div>

This is the result, you can it's very simple to create this card component using tailwind utility classes.

Now, let me explain each of the classes we have used to create this card.

w-64 : this specifies a width of 16rem.

rounded-lg : creates a border-radius of 0.5rem.

shadow-lg : it created a box shadow : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

text-center : it centers the text, text-align: center;

bg-indigo-600 : this specifies the indigo background color, follow the link to know more about tailwind colors follow this documentation

text-white : this specifies color: white;

p-4 : this specifies padding:0.5rem;

To know more about Tailwind CSS follow this tailwind docs

For reference, you can use this sample project from the git tailwind sample

Conclusion

Tailwind CSS provides you with a set of utility classes that can be used to create your unique and custom design with ease. Tailwind CSS is not opinionated, so you’re completely free in choosing the design of elements and components on your website.

Tailwind CSSCSS