Setting Up a Tailwind CSS Project from Scratch

Tailwind CSS has become a popular choice among developers for its utility-first approach to styling. It offers a highly customizable and efficient way to design web applications without writing custom CSS. In this guide, we'll walk you through setting up a Tailwind CSS project from scratch.

Table of Contents

1. Introduction to Tailwind CSS
2. Prerequisites
3. Setting Up a New Project
4. Installing Tailwind CSS
5. Configuring Tailwind CSS
6. Creating Your First Tailwind CSS File
7. Building and Watching CSS
8. Optimizing for Production
9. Conclusion

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. Unlike traditional CSS frameworks like Bootstrap or Foundation, Tailwind doesn't come with pre-designed components. Instead, it provides a set of utility classes that let you design your components without leaving your HTML.

Why Use Tailwind CSS?

• Utility-First Approach: Allows you to apply styles directly in your HTML, reducing the need for custom CSS.
• Customization: Tailwind is highly customizable, allowing you to override default settings and create your unique design system.
• Responsive Design: Tailwind offers built-in responsive design utilities, making it easy to create mobile-first designs.
• Consistency: Ensures consistent styling across your application.

Prerequisites

Before we begin, ensure you have the following installed:

• Node.js (v12 or higher)
• npm (Node Package Manager)

You can download and install Node.js and npm from the official website.

Setting Up a New Project

First, create a new directory for your project and navigate into it:

mkdir tailwind-project
cd tailwind-project

Next, initialize a new npm project:

npm init -y

This command creates a package.json file, which will keep track of your project dependencies and scripts.

Installing Tailwind CSS

To install Tailwind CSS, you need to add it as a dependency to your project. Run the following command:

npm install tailwindcss

After installing Tailwind CSS, you'll need to create a configuration file. This file will allow you to customize the default settings of Tailwind CSS. To generate this file, run:

npx tailwindcss init

This command creates a tailwind.config.js file in your project root. This file is where you can customize your Tailwind setup.

Configuring Tailwind CSS

Open the tailwind.config.js file. You should see a basic configuration like this:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content array is used to specify the paths to all of your template files. This allows Tailwind to tree-shake unused styles in production. Add the paths to your HTML and JavaScript files:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration tells Tailwind to look for classes in any .html or .js file inside the src directory.

Creating Your First Tailwind CSS File

Next, create a new CSS file where you will import Tailwind's base, components, and utilities styles. Create a src directory and inside it, create a file named styles.css:

mkdir src
touch src/styles.css

Open the styles.css file and add the following imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives tell Tailwind to include its base, components, and utilities styles in your CSS file.

Building and Watching CSS

To compile your CSS, you'll need to use the Tailwind CLI. Add a build script to your package.json file:

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

The build script compiles your src/styles.css file and outputs the result to dist/styles.css. The watch script does the same but continues to watch for changes and recompiles automatically.

To compile your CSS for the first time, run:

npm run build

This command creates a dist directory with the compiled styles.css file.

Creating Your First HTML File

Now, create an index.html file in the src directory:

touch src/index.html

Open the index.html file and add the following boilerplate HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Project</title>
  <link href="../dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-4xl font-bold text-center mt-10">Hello, Tailwind CSS!</h1>
</body>
</html>

This simple HTML file includes the compiled Tailwind CSS file and adds a styled heading.

To see your changes, open the index.html file in a web browser.

Optimizing for Production

When you're ready to deploy your project, you'll want to optimize your CSS for production. Tailwind provides a built-in tool for purging unused styles and minifying your CSS.

To enable this, update your tailwind.config.js file to include the purge option:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, install @fullhuman/postcss-purgecss and cssnano:

npm install @fullhuman/postcss-purgecss cssnano

Create a postcss.config.js file in your project root and add the following configuration:

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.{html,js}'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
    cssnano({
      preset: 'default',
    }),
  ],
}

This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.

Finally, update your build script in package.json:

"scripts": {
  "build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

Run the build script to generate your optimized CSS:

npm run build

Your dist/styles.css file is now optimized for production.

Conclusion

Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.

Happy coding!