14 Jan, 2020

Step Forward to Tailwind CSS

What is Tailwind CSS

Tailwind CSS is a utility-based CSS library. Nowadays tailwind gained a lot of attention because of its unique algorithm. Tailwind is not a UI kit and not like BootstrapFoundation, and Bulma. Tailwind does not have build-in UI components and neither default theme. The link of tailwindcss open source repository is here GitHub.

Why Tailwind CSS

Tailwind CSS is easy to use, understand or implement. It is all about playing with classes. It is light-weight. It is highly customizable. It is a low-level CSS framework that helps you to create an awesome page.

  • Highly Customizable
  • Responsive to the Core
  • Component Friendly

Tailwind vs bootstrap

  • Bootstrap is the most popular HTMLCSS and JS framework for creating a responsive mobile-first amazing website
  • Tailwind CSS is a utility-based CSS library. Tailwind is not a UI kit and not like Bootstrap, Foundation, and Bulma

pros

Here are some highly notable reasons.

  • It Makes CSS Simple
  • Play With Classes
  • Quick Setup
  • Very light
  • Highly Customizable
  • Utility First Style
  • Consistent
  • Fast
  • Docs
  • Open Source
  • Versatile

cons

Not Really Yet.

Features

  • No Default Theme
  • No Build-in UI Components

You May also Like: Top 5 Outstanding Ecommerce WordPress Themes 2020

components

Here are some Featured Components to use.

  • Blob Footer Card
  • Simple Card Component
  • Event Card
  • Google Account Menu
  • Simple Tab
  • Window 10 Progress Bar
  • Stripe Carousel Clone
  • Stack Clone
  • App Landing Page
  • Commerce App Card
  • Navbar
  • Table
  • Accordion
  • Form Grid
  • Simple Template
  • Whatsapp Clone
  • Pricing Panel
  • Trello Panel
  • Mobile Responsive Table
  • Login With Imag

Explore More:  https://tailwindcomponents.com/

INSTALLATION

Getting started with Tailwind CSS. Here is installation basic steps.

  • Using CDN
  • You can’t customize Tailwind’s default theme
  • You can’t use any directives like @apply, @veriants etc.
  • You can’t enable features like group hover
  • You can’t install third-party plugins

Use this in above your CSS:

<link href=”https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css” rel=”stylesheet”>

  • Using NPM

Then Add to your CSS

For Complete Installation Process Click on the Link: https://tailwindcss.com/docs/installation

About : superadmin