How to set up Tailwindcss Framework in your project
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.