How to Install Tailwind CSS v1.0
Tags: tailwindcss, css, webdesign, webdev
Published: 2019-04-19 15:18:17

---
title: How to Install Tailwind CSS v1.0
published: true
tags: tailwindcss, css, web design, web development
canonical_url: https://web-crunch.com/how-to-install-tailwind-css/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/apviciubesvs6hmsnoe9.jpg
---

[Tailwind CSS](https://tailwindcss.com) 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](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.0.0-beta.3) 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

{% youtube YqHQtTFj74w %}

### 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](https://github.com/tailwindcss/webpack-starter) 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:

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

```

to:

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

```

- Replace the contents of `tailwind.config.js` with the [new default](https://github.com/tailwindcss/tailwindcss/blob/next/stubs/defaultConfig.stub.js). 
- 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](https://github.com/tailwindcss/webpack-starter) 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:

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

```

to:

```javascript
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](https://youtube.com/c/webcrunch) and here on my [blog](https://web-crunch.com). Want more content like this in your inbox? [Subscribe to my newsletter](https://web-crunch.com/subcribe) and get it automatically.

#### Check out my course

[![https://i2.wp.com/i.imgur.com/KIaaJEB.jpg?ssl=1](https://i2.wp.com/i.imgur.com/KIaaJEB.jpg?ssl=1)](https://hellorails.io)

Want to learn Ruby on Rails from the ground up? Check out my upcoming course called [Hello Rails](https://hellorails.io). I leverage Tailwind CSS throughout the entire course. 

Follow [@hello_rails](https://twitter.com/hello_rails) and [myself @justalever](https://twitter.com/justalever) on Twitter.

The post [How to Install Tailwind CSS v1.0](https://web-crunch.com/how-to-install-tailwind-css/) appeared first on [Web-Crunch](https://web-crunch.com).