Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 36

Setting Up Tailwind CSS

Recommended resources

Hello! Welcome to the next module in your web development journey.

In the last lesson, you did a fantastic job building a complete, data-driven weather widget. You used your knowledge of HTML, CSS, and asynchronous JavaScript to create a functional application. Notice how we wrote all of our styles in a separate style.css file? This is a traditional and effective way to style websites.

Now, we're going to explore a modern and increasingly popular alternative: Tailwind CSS. This module will introduce you to a "utility-first" approach that can dramatically speed up your development process and help you build consistent, professional designs.

Today's lesson is all about getting started. We will focus on one key outcome: installing Tailwind CSS into a project and configuring its main configuration file, tailwind.config.js. This foundational setup is the first and most crucial step to using Tailwind effectively.

1. Setting Up Your First Tailwind Project

Tailwind CSS is a framework that you install into your project using Node Package Manager (npm), much like other development tools. The process involves initializing a project, installing Tailwind, creating configuration files, and setting up a build process to compile Tailwind's utility classes into a usable CSS file.

The video below provides a clear, step-by-step walkthrough of this entire process. We will use it as our primary guide for the installation.

How to Set up Tailwind CSS Project for Beginners from Scratch

Let's watch this tutorial from Devtamin to see how to set up a Tailwind CSS project from scratch. It covers all the essential terminal commands and file setups.

Watch the video from 01:02 to 03:45. Follow along in your own terminal and VS Code: Create a new project folder (e.g., tailwind-practice) and open it in VS Code. Initialize a Node.js project by running npm init -y in the terminal. The -y flag accepts all the default prompts. Install Tailwind CSS as a development dependency using the command shown. Generate the tailwind.config.js file. Configure the content property in tailwind.config.js to point to your HTML files. Create a source CSS file (e.g., src/input.css) and add the three @tailwind directives.

If you prefer a text-based guide to follow along with, the "Setting up Tailwind CSS" section in the article below covers these same steps.

Tailwind CSS Tutorial - Introduction & Setup Guide

This article from Tailgrids offers a concise, written guide to the installation process. It's a great reference to have open as you work.

Read the section titled 'Setting up Tailwind CSS'. Focus on steps 1 through 6, which mirror the steps in the video you just watched.

At this point, you should have a project structure that includes:

  • package.json (with tailwindcss listed in devDependencies)
  • tailwind.config.js
  • A src folder containing input.css

2. Understanding the Tailwind Configuration File

You've now created a tailwind.config.js file. This file is the control center for your Tailwind project. It's where you tell Tailwind which files to scan for classes and where you can customize or extend the framework's default design system.

Let's break down its key parts:

  • content: This is arguably the most important property. You provide an array of file paths (using glob patterns) that point to your HTML templates, JavaScript components, or any other files that contain Tailwind class names.
  • theme: This object is where you can customize Tailwind's default design tokens. You can add your own colors, font families, spacing values, and much more.
  • plugins: This array allows you to add official or third-party plugins that extend Tailwind's functionality, for example, adding new styling for forms or typography.
Tailwind CSS `tailwind.config.js` Content Configuration
This image shows exactly where to define the `content` property in your `tailwind.config.js` file. Tailwind uses this to know which classes you're using in your project, which is essential for optimizing your final CSS file.

To understand how to practically use this file, especially the theme object, the next video provides an excellent explanation. It shows the difference between viewing the entire default configuration and the best practice of only extending what you need.

Tailwind CSS Tutorial #5 - Tailwind Config

The Net Ninja has a great tutorial on the Tailwind config file. It explains why you should extend the default theme rather than overwriting it, and demonstrates how to add your own custom colors.

Watch from the beginning to 00:53 to understand the purpose of the config file. Then, skip to 05:14 and watch until 08:15 to see the best practice for creating a blank config file and using the theme.extend object to add custom values.

The key takeaway is that your tailwind.config.js file is meant to add your specific design choices on top of Tailwind's sensible defaults.

3. The Build Process: From Input to Output

Tailwind works by scanning your content files for classes, and then generating a CSS file that contains only the styles you've actually used. This process needs a "build" step.

You have your src/input.css file with the @tailwind directives. Now, we need to run a command that tells Tailwind to process this file and create a final output.css.

  1. Create your HTML file: In your project's root directory, create an index.html file. Add the basic HTML boilerplate.

  2. Link the output CSS: In the <head> of your index.html, add a link to the CSS file that Tailwind will generate. We'll place it in a dist folder.

    <link href="./dist/output.css" rel="stylesheet">

  3. Run the Build Command: In your terminal, run the following command. This tells Tailwind to take ./src/input.css as the input (-i), generate ./dist/output.css as the output (-o), and watch for any changes (--watch).

    npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

You should see a dist folder appear with an output.css file inside it. This file contains all the necessary Tailwind styles. Because you used the --watch flag, this process will run automatically whenever you change your HTML or config files.

  1. Test It Out: Add a simple element to your index.html <body> and apply some Tailwind classes to see it work. 
    <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
    Open index.html in your browser (you can use the VS Code Live Server extension). You should see "Hello Tailwind!" styled in a large, bold, blue font.

4. Improving Your Workflow

Typing that long build command every time is tedious. As you saw in the first video, we can add it to our package.json as an npm script for convenience.

How to Set up Tailwind CSS Project for Beginners from Scratch

Let's revisit the first video to see how to create a simple dev script. This is a standard practice that makes running the build process much easier.

Watch from 04:55 to 05:50. Follow the instructions to add a "dev" script to the "scripts" section of your package.json file.

Now, you can simply run npm run dev in your terminal to start the watch process.

Finally, to make working with Tailwind's many utility classes easier, you should install the official VS Code extension. It provides intelligent autocompletion, linting, and shows you the underlying CSS for each class on hover.

Tailwind CSS Tutorial #5 - Tailwind Config

The Net Ninja also highlights a must-have tool for working with Tailwind in VS Code. Let's see what it is and why it's so useful.

Watch from 10:11 to the end. Search for and install the Tailwind CSS IntelliSense extension in VS Code. As the video mentions, you may need to restart VS Code for it to take effect.

Conclusion

Excellent work! You've successfully set up a complete Tailwind CSS development environment. You now know how to install it, configure it, and run the build process.

Here are the key takeaways from today's lesson:

  • Installation Steps: Tailwind is installed via npm (npm install -D tailwindcss) and configured by creating a tailwind.config.js file (npx tailwindcss init).
  • The config File is Key: The tailwind.config.js file, especially the content property, is crucial. It tells Tailwind where to find your classes so it can build the smallest possible CSS file.
  • Build Process: Tailwind uses an input file with @tailwind directives to generate a final output CSS file that you link in your HTML.
  • Developer Workflow: Using an npm script (like npm run dev) and the Tailwind IntelliSense extension for VS Code makes the development experience much smoother.

In our next lesson, we will dive into the core philosophy of Tailwind: the utility-first approach. You'll learn what it means and start using Tailwind's rich set of utility classes to build layouts and style elements with incredible speed.