anurag's blog
Getting started with Tailwind CSS

Getting started with Tailwind CSS

Anurag Harne's photo
Anurag Harne
·

3 min read

Table of contents

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. Designed framework makes user to create application easier & faster. These utility classes control the layout, color, shadow, margin & padding and many more. It's a customizable and low-level CSS framework that provides all the building blocks to create designs without any styles.

👉Why Tailwind CSS?🤔

  1. Efficiency: Tailwind CSS provides a set of pre-defined utility classes that make it easier and faster to build user interfaces. Developers can easily create custom styles by combining these utility classes, which saves a lot of time and effort.

  2. Consistency: With Tailwind CSS, developers can ensure consistency in their codebase by using the same set of utility classes across their projects. This helps to avoid redundant code and ensures that the code is clean and maintainable.

  3. Customization: Tailwind CSS is highly customizable, allowing developers to configure the framework to meet their specific needs. They can modify the default settings or create their own custom utility classes.

  4. Accessibility: Tailwind CSS comes with built-in accessibility features, making it easier for developers to create accessible user interfaces. The framework provides classes for common accessibility requirements such as screen readers and keyboard navigation.

  5. Responsive design: Tailwind CSS provides a set of classes that make it easy to create responsive designs that work well on different screen sizes. This helps to ensure that the user interface looks good on all devices.

👉Advantage of Tailwind CSS

  • It is highly customizable

  • We can build complex responsive layouts freely

  • Needs minimal CSS for execution

  • Makes the changes in the desired manner

Getting Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript & reactJs components and generatw the corresponding styles. It's fast, flexible and reliable-with zero runtime.

There are 2 methods to run the Tailwind.

  1. CDN Script

  2. Installiton Tailwind in the System

  1. CDN Script: Add the CDN script to your HTML file in the head tag and start using the Tailwind utility classes to style your content. (But it has some limitations)
<script src="https://cdn.tailwindcss.com"></script>

Example:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-2xl font-semibold font-medium underline">
    Hello world!
  </h1>
</body>
</html>

Installation Tailwind in the System: Try Customizing your config Edit the tailwind.config object to customize your configuration with your own design tokens.

<script>
 tailwind.config = {
   theme: {
     extend: {
       colors: {
         clifford: '#da373d',
       }
     }
   }
 }
</script>

👉Core Concepts

  • Utility First Fundamental

  • Responsive Design

  • Reusing Styles

  • Handling Hover, Focus, and Other States

  • Dark Mode

  • Customizing the Framework

👉Responsive Design Displays

sm:

minimum width 640px CSS @media (min-width: 640px) { ... }

md:

minimum width 768px CSS @media (min-width: 768px) { ... }

lg:

minimum width 1024px CSS @media (min-width: 1024px) { ... }

xl:

minimum width 1280px CSS @media (min-width: 1280px) { ... }

2xl:

minimum width 1536px CSS @media (min-width: 1536px) { ... }

Tailwind CSS