Introduction to Tailwind CSS

Tailwind CSS is a framework for building applications mostly withou using custom CSS. it uses standards to be follwed in CSS.Over 2 L Websites are using Tailwind CSS.It makes developers to develop application faster and easier by using utility classes we can use it to create layouts, colors,typography,margins,padding and much more. main thing we need to note is its a mobile first approach.Tailwind allows us to write only minimal custom css.

CSS frameworks like Bootstrap,Materialize etc offers fully styled components like buttons, dropdowns etc Tailwind Instead, offers utility classes so you can create your own reusable components.

How to learn Tailwind CSS

First we need to know the prerequiste. If we are new to CSS kindly check this link HTML/CSS Tutorial.
Find out frequently used css in web application.
Search the functionality which we want to have in our application.

Frequently used CSS

We have first familiarize with Layouts.
Spacing (Margin,Padding etc).
Sizing.
Typography.
Colors.
Responsive Across Various Screens.
Background,Borders.
Units (px,rem,em vw,vh)

Less Frequenly used CSS

Transform and Transitions.
Filters and Effects.
Your wish.
Search and Find (Based on the need of the project)

How to start ?

There are some ways to use Tailwind CSS. but as a beginner we can start using tailwind by the Play CDN way.

Ref : Documentation

<!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-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Learn Tailwind CSS

It would be assumed you already familiar with the CSS. i would like write this article based on non-textbook approach(its like the way to learn the things based on our needs. needs may increase based on our projects.). We will start with "Frequently Used CSS as top priority and start with layouts.

Layouts

Aspect Ratio

Understanding Aspect Ratio

Proportional relationship between width and height of an object example consider an image. (Width to Height)

Tailwind CSS

aspect-auto    aspect-ratio: auto;
aspect-square    aspect-ratio: 1 / 1;
aspect-video    aspect-ratio: 16 / 9;

For example, a square image has an aspect ratio of 1:1, The image could be 200px × 200px and the aspect ratio would still be 1:1.

As another example, a portrait-style image might have a ratio of 2:3. With this aspect ratio, the height is 1.5 times longer than the width. So the image could be 500px × 750px,etc.

Container

The container class sets the max-width of an element to match the min-width of the current breakpoint.

container    None    width: 100%;
sm (640px)    max-width: 640px;
md (768px)    max-width: 768px;
lg (1024px)    max-width: 1024px;
xl (1280px)    max-width: 1280px;
2xl (1536px)    max-width: 1536px;

To center a container, use the mx-auto utility:

To add horizontal padding, use the px-{size} utilities:

We can use tailwind.config.cs to set our custom configuration.For example if we want to center the elements in the container

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

Flex

Utilities for controlling how flex items both grow and shrink.

flex : [Grow] [Shrink] [Flex Basis]

Class   Properties
flex-1    flex: 1 1 0%;
flex-auto    flex: 1 1 auto;
flex-initial    flex: 0 1 auto;
flex-none    flex: none;

FlexDirection

Utilities for controlling the direction of flex items.

flex-row | flex-direction: row; flex-row-reverse | flex-direction: row-reverse; flex-col | flex-direction: column; flex-col-reverse | flex-direction: column-reverse;

Arbitary values.

In Tailwind CSS we will use some design units which are prebuild by the tailwind.if we want to overcome with custom design rules in the the units we will use this method. for Eg: top property has some prebuild values like top-0.5 = 2px , top-1 = 4px and so on if we want to give top 23 px we need to give as top-[23px] (Bounded by square bracket] we can use this arbitary values for any properties as applicable.

Spacing

Each element is bounded by a virtual box. spacing inside the box with elements is padding and spacing between other elements boxes is margin.

Padding

Padding is denoted by "p" . Horizontal padding is denoted by "px". Vertical padding is denoted by "py". Same as "pt" for Padding Top and "pb" for Padding Bottom and "pl" for Padding Left and "pr" for Padding Right. The units are based on "REM"

Units

REM and EM

REM is denoted by root element font size. in HTML document root element has some default font-size of 16px. (If doesnt browser font-size is referred) mostly 16px is used. so if we denote 2rem its equivalent to 32px.

EM is denoted to font-size of current element. if a paragraph we set font-size to 10px then we give line-height of the paragraph to 3em then its line height is equivalent to 30px.

Pixels - px

Its a absolute length category the size is fixed based on the device. its equivalent to (1/96th of inch).

Viewport

vw - Viewport width device which are viewing it covers to total width of the current screen similarly for vh -Viewport height it covers the total height of the current screen.

(....To be Continued)

Ponmurali Jeyaprakasam's Blog