Set Up a Tailwind Project From Scratch

Oct 10, 2023

Tailwind CSS is a utility-first CSS framework. It is different from other CSS frameworks like Bootstrap or Foundation because it is not a UI kit. It does not come with pre-built components like buttons, cards, etc. Instead, it provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. This allows you to build designs that are completely unique to your project.

In this article, we are going to set up a Tailwind project from scratch. This will be a basic starter template that you can use for any project. This is the same starter template that I used in my Tailwind From Scratch course.

When it comes to using Tailwind, there are a few ways to get started:

CDN link
Tailwind CLI
PostCSS plugin

You could just add the CDN link to your HTML file and start using Tailwind. This is great for learning or just throwing something together, however, it is not really recommended for production. It also limits what you can do.

If you are building an app with a framework like React, Vue or Angular, you can install Tailwind as a PostCSS plugin to process your CSS. This is a great option if you are using one of these frameworks.

We are going to go with the second option, which is to use the Tailwind CLI. It is also the most flexible and allows you to use Tailwind with any project.

Creating a Project

Let's start by creating a folder for our project. I am going to call mine tailwind-starter, because it can be used as a starter for any Tailwind project.

Open a terminal in that folder and run the following command:

npm init -y

This will create a package.json file for us. Next, we need to install Tailwind. Run the following command:

npm install -D tailwindcss

We installed it as a dev dependency because we are going to use it to build our CSS file.

Next, we need to create a tailwind.config.js file. This is where we will configure Tailwind. Run the following command:

npx tailwindcss init

Configure Template Paths

Open your tailwind.config.js file and add the following code:

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

This tells Tailwind where to look for your HTML files. In this case, we are telling it to look in the root directory for any HTML files. If you have your HTML files in a different directory, you can change this to match your setup.

Input CSS

Next, we need to create a CSS file that will be the input for Tailwind. Create a file called src/input.css and add the following directives:

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

This tells Tailwind to inject the base styles, components and utilities into our CSS file.

NPM Scripts

We are going to use the Tailwind CLI to build our CSS file. Open your package.json file and add the following scripts:

 "scripts": {
    "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch",
    "build": "tailwindcss -i ./input.css -o ./css/style.css"
  },

The watch script will watch the input.css file, which is our Tailwind CSS file, and build it whenever we make changes. The build script will build our CSS file once. When you are developing your project, you will want to run the watch script. To build for production, you will want to run the build script. The output will then be in the css/style.css file. Of course, you can name these files something different if you wish. You do not have to create the css folder or the style.css file as they will be created when you run the scripts.

HTML File

Now we need to create an HTML file to test our setup. Create a file called index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Simple Tailwind Starter</title>
  </head>
  <body>
    <h1 class="text-4xl mb-4">Welcome</h1>
    <p>Start building your Tailwind project</p>
  </body>
</html>

Notice that we are using the css/style.css file that we created in the previous step.

That's it! We are now ready to start building our Tailwind project. Run the following command to start the development server:

npm run watch

It should have created your css/style.css file. Now open your index.html. I suggest using VS Code with Live Server, as it will automatically reload your browser when you make changes.

To stop your Tailwind development server, press CTRL + C in your terminal.

Add a `.gitignore` File

If you are using Git, you will want to add a .gitignore file to your project. This will prevent your node_modules folder from being added to your repository. Create a file called .gitignore and add the following code:

node_modules

Now you can initialize your Git repository and push your project to GitHub and simply clone it and run npm install to install your dependencies anytime you want to start a new project.

You can find the full code for this starter template here

Stay connected with news and updates!

Join our mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.

We hate SPAM. We will never sell your information, for any reason.