Check out my latest project called Rails UI 🎨

March 22, 2019

How to Install Tailwind CSS v1.0

Tailwind CSS has become my favorite CSS framework 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 Tailwind CSS.

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 [email protected] 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.

Leave a reply

Sign in or Sign up to leave a response.

1 response

Icons/flag
Icons/link diagonal

PROMO. PROMO..PROMO...
Why sleeping while others are making billions of dollars..?
I have a business proposal for you.
Fast and trusted platform for Easy withdrawal

$300 to get $3,000+ 5days.
$400 to get $4,000+ 5days.
$500 to get $5,000+ 5days.
$600 to get $6,000+ 5days.
$800 to get $8,000+ 5days.
$1000 to get $10,000+ in 5 working days.

No experience needed,    
I will guide you through the process step by step instructions.
Contact us for more information.
Free to contact us if you are interested through the email:[email protected]
Once you contact us, we will forward you our website to register.

Thank you
Mr.Mark Davson
MARK DAVSON INVESTMENT MANAGEMENT
Email:[email protected]
WhatsApp:+1(204)808-4628
WhatsApp:+1(731)333-3262

Est. reading time: 3 minutes
Stats: 3,093 views

Categories

Collection

Part of the Let's Build: With Tailwind CSS collection