Scribd
Upload
24 views

06 Installation+Guide+-+Tailwind+CSS

This document provides a 12 step guide to installing Tailwind CSS in a project via two methods: 1) using a CDN link or 2) via PostCSS. The PostCSS method involves initializing Tailwind, installing dependencies, configuring Tailwind, creating CSS files, and building/watching for changes to the Tailwind CSS file.

Uploaded by

sundarpandian201
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

06 Installation+Guide+-+Tailwind+CSS

This document provides a 12 step guide to installing Tailwind CSS in a project via two methods: 1) using a CDN link or 2) via PostCSS. The PostCSS method involves initializing Tailwind, installing dependencies, configuring Tailwind, creating CSS files, and building/watching for changes to the Tailwind CSS file.

Uploaded by

sundarpandian201
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Code Bless You

Installation Guide for Tailwind

There are two ways to Install Tailwind CSS in your


project.

1. Install via CDN link


2. Install via PostCSS

Method 1 - Install via CDN Link

Step 1 - Create an index.html file and type exclamation mark ( ! ) and


press Tab/Enter.

Step 2 - Copy this script tag and paste in the Head Section.

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

Step 3 - Testing Tailwind works or Not.


<p class='text-red-600'> I will master Tailwind CSS. </p>

Method 2 - Install via PostCSS

Step 1 - Open up the folder in VS code and Open Built-in Terminal


By Pressing ‘CTRL + ~’ in windows and ‘CMD + ~’.

Step 2 - Create Package.json


npm init -y

1
Code Bless You

Type this command and press Enter to generate the Package.json


file.

Step 3 - Now, We need to Install Tailwind CSS Package


npm install -D tailwindcss postcss autoprefixer
Again copy this code and paste it in terminal and press Enter

Step 4 - After Completing this we will create Configuration File -


‘tailwind.config.js’
npx tailwindcss init
Or Apply this ↓ for tailwind.config.js file with all styles
npx tailwindcss init --full

Step 5 - Create postcss.config.js file and paste these lines in it. Save
it.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

Step 6 - Now go to the tailwind.config.js file and in the content add


folder path.
module.exports = {
content: ["./public/**/*.html"],
theme: {
extend: {},
},
plugins: [],
};

2
Code Bless You

Step 7 - Now we will create Folder src and then create a new
main.css file in it. Copy this line of code and paste it in style.css file
and save it.
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 8 - Now open package.json file and in scripts curly bracket add
this script and Save it.
"build": "tailwind build -i Tailwind/main.css -o public/tailwind.css",

Step 9 - Now we generate a Tailwind CSS file in the public folder by


running this script. So again Open Terminal and write this command
and press Enter.
npm run build

Step 10 - Now Create HTML file in public Folder and After that link
tailwind.css in your HTML File.
<link rel="stylesheet" href="./tailwind.css">

Step 11 - Testing Tailwind works or Not.


<p class='text-red-600'> I will master Tailwind CSS. </p>

3
Code Bless You

Setup Tailwind Build watcher Script

Step 1 -Open up the Package.json file and after the build:tailwind


script add another script in the next line.
"watch": "tailwind build -i Tailwind/main.css -o public/tailwind.css -w"

Step 2 - Run this command to Constantly update your Tailwind CSS.

npm run watch

You might also like