Goodbye Bootstrap, Hello TailwindCSS

Published on Dec-03-2019 – 4 minute read

Talk about CSS Frameworks, Boostrap is the most popular CSS Framework with thousands of website built with it. It comes with some built-in widgets, e.g tabs, accordion, navbar, buttons, etc . I spent more than two years using Bootstrap Framework for my projects and it was awesome. I spent lesser time writing css code while using Bootstrap and my productivity increased. But i was having some problems with it.

  • It was too rigid.
  • Customizing it to your taste can be difficult.
  • Class names can be frustrating.

I began a search for a better way to resolve these problems, then i came across TailwindCSS. TailwindCSS is an utility framework that solves these problems. If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you. But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you're looking for.

Reasons why you should use Tailwind in your next project

  • Utility-first
    This is a core aspect that tailwind focuses on. Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc. Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.

  • Component-friendly
    Tailwind helps to create rapid reusable component, While you can do a lot with just utility classes, sometimes a component class is the right decision. Tailwind provides tools for extracting component classes from repeated utility patterns, making it easy to update multiple instances of a component from one place:

  • Responsive to the core
    Every Tailwind utility also comes in responsive flavors, making it extremely easy to build responsive interfaces without ever leaving your HTML. Tailwind uses an intuitive {screen}: prefix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and intact.

  • Designed to be customized
    If it makes sense to be customizable, Tailwind lets you customize it. This includes colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more. Tailwind is written in PostCSS and configured in JavaScript, which means you have the full power of a real programming language at your fingertips. Tailwind is more than a CSS framework, it's an engine for creating design systems.

Install Tailwind via npm


//Using npm
npm install tailwindcss --save-dev

// Using Yarn
yarn add tailwindcss --dev

Add Tailwind to your CSS

@tailwind base;

@tailwind components;

@tailwind utilities;

Process your CSS with Tailwind

Using Tailwind CLI

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:

npx tailwind build styles.css -o output.css

Use the npx tailwind help build command to learn more about the various CLI options.

Laravel Mix

If you're writing your project in plain CSS, use Mix's postCss method to process your CSS and include tailwindcss as a plugin:

mix.postCss('resources/css/main.css', 'public/css', [
  require('tailwindcss'),
])

If you're using a preprocessor, use the options method to add tailwindcss as a PostCSS plugin:

const tailwindcss = require('tailwindcss')

mix.less('resources/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./path/to/your/tailwind.config.js'),
    ]
  })

Note for Sass users: Due to an unresolved issue with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable processCssUrls:

const tailwindcss = require('tailwindcss')

mix.sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./path/to/your/tailwind.config.js') ],
  })

Using Tailwind via CDN

Before using the CDN build please note, many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.

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

To get the most out of Tailwind, you really should install it via npm.

To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

You can generate tailwind full config file using

npx tailwind init tailwindcss-config.js --full

Hope this helped