INTRODUCTION OF TAILWIND CSS

Tailwind CSS is a Utility-First CSS Framework that helps to style the HTML pages without leaving the HTML file. This means that you can use some Utility classes within the HTML tags that helps to design your HTML page without writing down the CSS file.

Tailwind utility classes used within the HTML files for designing the web pages.Tailwind CSS makes the website responsive.

Installation Of Tailwind via CDN

Step1: Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your HTML page.

  <script src="https://cdn.tailwindcss.com"></script>

Step2: Edit the tailwind.config object to customize your configuration with your own design tokens.

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

Warning: cdn.tailwindcss.com should not be used in productiointo the contentn. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: tailwindcss.com/docs/installation

Installation Of Tailwind For Production via PostCSS

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

Setting Up Tailwind CSS-->

step 1: Make sure that you have installed nodejs in your computer system.
$ npm init -y// This initializes the directory as a NodeJs project.
Step 2: Install Tailwind CSS by writing command: $ npm install -D tailwindcss postcss autoprefixer
Step 3: Install vite for starting a server that automatically get refreshed :
$ npm install vite
Step 4: Go to the package.json and include "scripts": { "start": "vite" },
Step 5: For initialising Tailwind , run the command $ npx tailwindcss init -p
Step 6: After running the command, postcss.config.js and tailwind.config.js files are created. Go into tailwind.config.js file and replace content[] ,with content["*"] i.e., we want to use tailwind in all content/files.
Step 7: Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Step 7: Now go to your vs code and install the extension Tailwind CSS IntelliSense.

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as suggestion , autocomplete, syntax highlighting, and linting.
Step 8: Run $ npm run start command to start a dev server.

Note: For exploring more about tailwind css you can go to the documentation of Tailwindcss website: Tailwind Link.

Why Use Tailwind CSS?

Repeating of class name not required.
When you go with utility-first approach/class , the component get independent with other .
Break points are given into Tailwind CSS that's help into making a responsive website.
Tailwind CSS takes minimum line of code to design the HTML page.
Easy to use.

Fonts & Sizing

Screenshot from 2022-08-14 22-55-08.png

Margins ,Borders ,& Paddings

Screenshot from 2022-08-14 23-13-35.png

Hover

Screenshot from 2022-08-14 23-57-34.png

Responsive Design in Tailwind CSS

Tailwind allows you to build responsive designs in the same way you build the rest of your design using utility classes.
There are five breakpoints by default:

sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

Build Your Site With Tailwind CSS

Fast, Flexible, and Reliable With Zero-Runtime->

Table of contents