Vinayak's Blog
Getting Started With Tailwind CSS

Getting Started With Tailwind CSS

Vinayak Sharma's photo
Vinayak Sharma
·

3 min read

Tailwind CSS is open source CSS Framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

Installation

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

  • create a directory
mkdir Tailwind_CSS
  • initialize Tailwind via npm this will create a tailwind.config.js file in the root directory.
npx tailwindcss init
  • configure the tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  • create an ./src/ folder in the root directory and inside it create a ./css/ folder and make an input.css the file inside it.

  • Add Tailwind Directives to your CSS.

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;
  • start the tailwind CSS build process
npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch

this will create a build and CSS folder in the root directory. CSS folder will contain a style.css file in it.

  • create an index.html file in the root directory.

  • link the style.css in the index.html file.

This entire process will set up Tailwind CSS for your project

Extensions For VSCode

  • Tailwind CSS IntelliSense

  • Inline Fold

  • Live Server

  • Prettier

Classes in TailwindCSS

Managing duplication and creating reusable abstractions.

Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it.

But of course, as a project grows, you’ll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.

For example, in the template below you can see the utility classes for each avatar image are repeated five separate times:

<div>
  <div class="flex items-center space-x-2 text-base">
    <h4 class="font-semibold text-slate-900">Contributors</h4>
    <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>
  </div>
  <div class="mt-3 flex -space-x-2 overflow-hidden">
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
  </div>
  <div class="mt-3 text-sm font-medium">
    <a href="#" class="text-blue-500">+ 198 others</a>
  </div>
</div>

Tailwind classes can be easily combined to build UI components, and some of them have many values to choose from (.text-red-200, .text-red-500, etc.), which allows you to work on details according to your conception.

Project Deployment

  • create a .gitignore file in the root repository include node_modules in it.

  • initialize git init in the root directory

  • add files git add .

  • commit the changes git commit -m "First Commit"

  • add the remote GitHub repository git remote add origin https://github.com/your_username/your_github_repo

  • push the code to the GitHub repository git push -u origin main

Cloud Providers

  • Netlify

  • Render

  • Linode

Connect The Github repository to the any of the Cloud Providers mention above. it will take the build files and depoly it.

WeMakeDevsTailwind CSSWeb DevelopmentFrontend DevelopmentCSS