Getting Started with Tailwind CSS: A Quick-Start Guide

Heads up, this content is in beta. Use at your own risk!

Tailwind CSS is a highly customizable, utility-first CSS framework that gives you the power to create unique and responsive designs. If you’re new to Tailwind and ready to dive in, this guide is your first step towards mastering this innovative framework.

How to install Tailwind CSS

Use this quick-start guide to get Tailwind CSS set up in your project.

1. Installing Tailwind CSS

Before you start, ensure that you have Node.js and npm installed. If you haven’t, you can download Node.js from the official website, which will include npm (Node Package Manager).

Once you have Node.js and npm set up, you can install Tailwind CSS into your project via npm by navigating to your project directory in the terminal and running the following command:

npm install tailwindcss

2. Generate Tailwind Config File

After the installation, generate your tailwind.config.js file by running:

npx tailwindcss init

This creates a tailwind.config.js file in your project root. This file is where you can customize your design, like defining the color palette, spacing/sizing scale, and more. Initially, it will look like this:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

3. Include Tailwind in Your CSS

Next, create a new CSS file in your project, name it (for example, styles.css), and use the @import directive to include Tailwind’s base, components, and utilities styles:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

4. Process Your CSS with Tailwind

Now, we want to set up a process to build our CSS with Tailwind. Add a build script to your package.json:

"scripts": {
  "build": "tailwindcss build src/styles.css -o dist/styles.css"
}

With this in place, you can now run npm run build to build your CSS.

Creating a Basic Layout with Tailwind CSS

Let’s create a basic layout to see Tailwind CSS in action.

Assume we want to create a simple card component with a title, image, and description. Here’s how we could do it using Tailwind CSS:

<div
  class="max-w-md m-5 mx-auto overflow-hidden bg-white shadow-md rounded-xl md:max-w-2xl"
>
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img
        class="object-cover w-full h-48 md:w-48"
        src="/img/store.jpg"
        alt="A cool store"
      />
    </div>
    <div class="p-8">
      <div
        class="text-sm font-semibold tracking-wide text-indigo-500 uppercase"
      >
        The cool store
      </div>
      <p class="mt-2 text-gray-500">
        Visit our cool store and find the best products for you. Quality
        guaranteed!
      </p>
    </div>
  </div>
</div>

Let’s break down a few of the classes used here:

• max-w-md: sets the maximum width of the element to 24rem.
• mx-auto: centers the element horizontally.
• bg-white: sets the background color of the element to white.
• rounded-xl: gives the element rounded corners.
• shadow-md: applies medium box shadow to the element.
• overflow-hidden: clips any child content or padding that goes outside the bounds of the element.
• m-5: applies 1.25rem margin on all four sides of the element.

And that’s it!

You’ve set up Tailwind CSS and built a basic layout. Remember, the real power of Tailwind comes from customizing it to suit your needs. Make sure to explore the tailwind.config.js file and the official Tailwind CSS documentation to see all the ways you can tailor the framework to your project.

Tailwind CSS offers a robust platform to build unique, responsive designs with speed and efficiency. While the initial learning curve can be steep, the payoff is well worth the effort.

This guide has given you a basic understanding of how to set up and start using Tailwind CSS. Now, it’s time to unleash your creativity and explore all the possibilities that Tailwind CSS has to offer.