Build a navbar using Tailwind CSS

Tailwind CSS is a very powerful utility CSS framework, which consists of user-friendly classes and it is very scalable, customizable according to your requirements. While using Tailwind CSS you don’t need to remember class names as they are very similar to their original CSS property. For example, to add display: flex you can use class = "flex", for flex-direction: column you can directly add class = "flex-col" .

Setting Up Tailwind CSS

Let’s start with including Tailwind CSS into our workspace. We can directly get tailwind by adding following line to our HTML code:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Vue JS

Run following command to install via npm:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npx tailwindcss init -p
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;

React JS

Run following command to install via npm:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install @craco/craco
{
// ...
"scripts": {
- "start": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test",
"eject": "react-scripts eject"
},
}
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}

Create Your Configuration File:

Next, generate your tailwind.config.js file:

npx tailwindcss init
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

So today we will build a Navbar using tailwind CSS.

Here’s the output image of our beautiful navbar that we gonna build in few moments.

Hi, there. I am a front end web developer. I am doing it from past 2 years and have quite good experience in client handling.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store