How to set up Tailwindcss Framework in your project

Bimsara De Silva

3 min readNov 20, 2022

Content

How to use tailwindcss CDN
How to install and set up tailwind CLI

Get Started

How to use tailwindcss CDN

Go to “https://tailwindcss.com/docs/installation/play-cdn" and get the CDN link usage for your HTML in the <head> tag.

<script src="https://cdn.tailwindcss.com"></script>

<!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" />
    <title>Tailwin css frame work</title>
    <link rel="stylesheet" href="css/styles.css" />

    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body class="bg-green-100">
    <div class="text-center mt-10">
      <button
        class="bg-red-500 px-6 py-3 rounded-full text-white hover:bg-red-100"
      >
        Get Started
      </button>
    </div>
  </body>
</html>

Output

2. How to install and set up tailwind CLI

Install the bellow extension in visual studio code

Tailwind CSS IntelliSense
Headwind
Live Server
Prettier - Code formatter
Material Icon Theme

Step 1

Create a folder (“mkdir my-app”) and run the “npm init -y” code line in your cmd.

mkdir my-app
cd my-app
npm init -y

The “package.json”

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
  }
}

Step 2

Install the below command and auto-create the “package-lock.json” and “tailwind.config.js” files.

npm install -D tailwindcss
npx tailwindcss init

The updated “package.json”.

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

Add the paths to all your template files in your tailwind.config.js file.

The “tailwind.config.js”

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create an “input.css” file and add this code lines.

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

Step 3

The Tailwind CLI build process

Update the “package.json”

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss -i ./input.css -o ./css/main.css",
    "watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

Then run the below code and the “css folder” inside “main.css” was automatically created.

npm run build

Create an “index.html” file and add “main.css” in <head> tag.

<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" />
    <title>Tailwin Css Framework</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body class="bg-green-100">
    <div class="text-center mt-10">
      <button
        class="bg-red-500 px-6 py-3 rounded-full text-white hover:bg-red-100"
      >
        Get Started
      </button>
    </div>
  </body>
</html>

Step 4

The “npm run watch” is always running. As you make changes to the code, the results are displayed immediately.

npm run watch

Output

The File Structure

Summary

Tailwind css used to style our web page. We can use css tailwind class inline. This discussed how to set up tailwind CDN or CLI.

How to set up Tailwindcss Framework in your project

Get Started

Written by Bimsara De Silva