Creating a Basic Button Start with a simple button using padding, background color, and text styling. Tailwind makes it easy to build buttons quickly with utility classes. Example: <button class=”bg-blue-500 text-white px-4 py-2 rounded”> Click Me </button> Adding Hover & Focus Effects Enhance user interaction by adding hover and focus states. These improve UX by […]

Creating the Card Container Start by building a basic card container using background, padding, rounded corners, and shadow. This forms the base structure of your card. Example: <div class=”bg-white shadow-md rounded-lg p-6″> <h2 class=”text-xl font-semibold”>Card Title</h2> <p class=”text-gray-600″>This is a simple card.</p> </div> Adding Image to the Card Enhance your card by including an image […]

Creating the Navbar Container Start by building a flex container for your navbar. This helps align logo, links, and buttons in a single horizontal row. Example: <nav class=“bg-gray-900 text-white p-4”> <div class=“flex justify-between items-center”> <h1 class=“text-xl font-bold”>MyLogo</h1> </div> </nav> Adding Navigation Links Next, add navigation links and align them using flex utilities. You can use […]

Understanding Tailwind Spacing Scale Tailwind uses a predefined spacing scale (like 0, 1, 2, 4, 6, 8…) which represents values in rem. This helps maintain consistent spacing across your design. Example: <div class=“p-4 bg-blue-200”> Padding 4 (1rem) </div> Applying Margin (m-*) Margin controls the outer space around elements. You can use m-* for all sides […]

Enabling Grid Layout with grid To start using CSS Grid in Tailwind, apply the grid class to a container. This activates grid layout and allows you to control rows and columns easily. Example: <div class=“grid”> <div class=“bg-blue-300 p-4”>Item 1</div> <div class=“bg-green-300 p-4”>Item 2</div> </div> Defining Columns (grid-cols-*) You can define how many columns your layout […]

Enabling Flexbox with flex To start using Flexbox in Tailwind, you need to apply the flex class to a container. This turns the element into a flex container and enables all flex properties for its children. Example: <div class=“flex”> <div class=“bg-blue-300 p-4”>Item 1</div> <div class=“bg-green-300 p-4”>Item 2</div> </div> Controlling Direction (flex-row, flex-col) Flex direction defines […]

Initialize Your Project Start by creating a new project folder and setting up Node.js. This step prepares your environment so you can install and manage Tailwind CSS properly. Example: mkdir my-project cd my-project npm init -y Install Tailwind CSS & Dependencies Next, install Tailwind CSS along with PostCSS and Autoprefixer. These tools help process your […]

Setting Up Your Project Environment Before installing Tailwind CSS, you need a proper project setup. This usually involves creating a project folder and initializing Node.js. Node helps manage dependencies and run build tools efficiently. Example: npm init -y You can initialize a project using: This creates a basic package.json file required for Tailwind installation. Installing […]