How to Install Tailwind CSS v1.0

Tailwind CSS has become my favorite CSS frameworks to reach for lately. The focus of the framework is utility-first which means adding classes to HTML elements to style it collectively. This guide will teach you how to install the new beta version 1.0 of Tailwind CSS coming soon.

This post is also the kick off of a new series titled Let’s Build: With Tailwind CSS. In this series, I’ll be creating UI components and projects using Tailwind CSS exclusively. We’ll harness the framework and possibly extend it to create awesome looking UI from scratch. We may even clone other popular UI as an example use case too.

Why Tailwind CSS?

I hated the concept of purely functional/atomic/utility CSS at first but have now grown to love it. I originally hated it because of how cluttered it felt writing so many class names inside my HTML. It felt as though I was writing inline styles almost (you kind of are…).

The beauty of the Tailwind CSS approach I found in these bullet points:

• Less opinionated (Tailwind has its defaults but you can customize everything)
• Configurable
• Hardly ever need to hunt/find CSS in your stack
• Hardly ever need to write repeated CSS in your stack.
• Scaling is just easier
• Prototyping is just easier
• Less jumping between markup and CSS files

Installation

Installing Tailwind is quite easy. You will need some sort of build process to compile down the code. It leverages PostCSS so something like Gulp, Wepback, Laravel Mix, or insert your favorite build tool name should suffice.

In this guide, I’ll be making use of Adam Wathan’s webpacker starter kit for Tailwind. I’ll amend it to work with the new beta release.

Kicking things off – Option 1

(if you’re migrating from an older version)

• Download the starter kit and run yarn.
• Rename the tailwind.js file to tailwind.config.js
• Inside postcss.config.js change the following:

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.js')],
}

to:

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.config.js')],
}

• Replace the contents of tailwind.config.js with the new default.
• Inside tailwind.css replace the @import preflight; line with @import base;
• run yarn dev

Kicking things off – Option 2

(recommended if you’re brand new to the framework)

• Download the starter kit and run yarn.
• Add the new Tailwind beta yarn add -D tailwindcss@next to your project.
• Init Tailwind – yarn tailwind init – This should create a new tailwind.config.js file inside your project.
• Inside postcss.config.js change the following:

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.js')],
}

to:

module.exports = {
  plugins: [require('tailwindcss')('./tailwind.config.js')],
}

• Inside tailwind.css replace the @import preflight; line with @import base;
• Run yarn dev

What’s next?

I’d love to hear from you about what components/projects/designs you might like to see built with Tailwind CSS. My goal is to start small and scale along the way. We’ll start down to the component level and work our way up to larger pages/views. From there we can extend Tailwind and learn what more is possible with the framework thanks to plugins and optional configurations. I’ll also show you how to install it on your favorite framework of choice.

Shameless plug time

If you liked this post, I have more videos on YouTube and here on my blog. Want more content like this in your inbox? Subscribe to my newsletter and get it automatically.

Check out my course

Want to learn Ruby on Rails from the ground up? Check out my upcoming course called Hello Rails. I leverage Tailwind CSS throughout the entire course.

Follow @hello_rails and myself @justalever on Twitter.

The post How to Install Tailwind CSS v1.0 appeared first on Web-Crunch.