Keep track of where you left off & more. Sign up today

The Ultimate Lean Tailwind CSS Tutorial

Jun 06, 2020 ·5 min read


CSS libraries like Bootstrap help provide a consistent display on a website. But many developers find them bulky and not flexible enough. Enter Tailwind CSS, the easy way to rapidly build custom designs. Tailwind CSS has tripled in popularity since it launched in May 2019. It continues to receive high satisfaction rates and is used by thousands of websites worldwide.

This article gives a lean, mean tutorial on how to use Tailwind CSS. We look at what sets Tailwind apart from other CSS libraries and how to install it into your IDE. We examine a few of its main features and give some simple examples. Read on to find out why Tailwind CSS is fast becoming the CSS framework of choice.


What Is Tailwind CSS?

Tailwind CSS is a powerful CSS framework that lets you build bespoke designs without the glut. Instead of predesigned component styles, you add responsive styles to build your own. It looks like inline-styling but harnesses the flexibility of responsive design and pseudo-classes. With Tailwind you write less CSS as the library takes care of everything. The result is a cleaner and leaner codebase. It's easy to read and it's easy to modify.


How to Setup Tailwind CSS

Follow the instructions on the official Tailwind CSS site to download and install it into your IDE of choice. For many developers using npm this involves:

npm install tailwindcss

You then use the @tailwind directive to inject it into your CSS. And if you want to configure the default options use:

npx tailwindcss init

Tailwind CSS can then be added to your build chain. This is done using a PostCSS plugin. Edit the postcss.config.js file plugins array by adding:

require('tailwindcss'),
require('autoprefixer')

How to Install Tailwind CSS in Laravel and Use a CDN

You can easily add Tailwind to your Laravel projects for both plain CSS and preprocessors. Instructions are on the Installation page of the TailwindCSS.com documentation.

If you want to keep things really simple use a CDN version. However, it's very restrictive and increases the raw file size considerably so beware!

Responsive Variants

Responsive design shapes how your web pages and components look on any screen size.

Tailwind CSS is responsive to the core. You can create a catch-all class or use a {screen} prefix to target a specific size. For example:

<div class="justify-end sm:justify-start lg:justify-between"></div>

The justify-end style is the default class name. By prefixing sm: you add an alternative style for small screens. Large screens use lg: and you can guess what md: stands for.

Pseudo-Classes

Hover and focus styles work in the same way as responsive variants by adding a prefix. For example:

<input class="bg-blue-200 hover:bg-yellow hover:border-blue-300 focus:outline-none" />

The original class is bg-blue-200. To turn the input field yellow on hover just add the prefix hover: Focus is :focus and you can mix things up like in the example above.

Learn More With Visual Tutorials

You've only scratched the surface when it comes to the power of Tailwind CSS. What you need is a visual tutorial that will guide you through all of its features.

CodeTime offers over 650 video tutorials. And they're FREE!

Learn more about Tailwind CSS and other popular CSS/HTML libraries like Bootstrap. We offer all types of courses from Vue.js to Adobe Experience Design.

Get started by registering on our site. You'll be able to save your progress and view the entire library when you do.

Come and join us to watch, reference, and learn code today.