Create Your First Project with Tailwind CSS
Setup Tailwind CSS
Tailwind CDN [Not Recommended]
<script src="https://cdn.tailwindcss.com"></script>
Tailwind CLI Setup [Recommended]
sudo apt install nodejs npm -y
We also need a code editor. For that download visual studio code and install it. After installation complete click extension and install 'Tailwind CSS IntelliSense' and Live server. For better experience (optional) you can also install this extension pack. If nothing goes wrong than our Tailwind CLI installation complete.
Create Your First Tailwind Project
Create a new Folder with your Project name and Open it on Terminal. Windows user simply open the folder, on addressbar of file explorer type 'cmd' and hit 'Enter'. Now let's initialize our project folder with npm. Run below command and provide Project Name with lower case as well as description , version author etc.
npm init
Now let's bind our project with Tailwind CSS. For that run this command.
npx tailwindcss init
It will generate a folder and create a file called tailwind.config.js. Open this file in vs code and add this line inside content[];
"./src/**/*.{html,js}"
Now create a folder 'src' and inside of this folder create 'input.css' 'index.html' . Now open input.css and add this code.
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind CSS Compiler
"compile" : "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
<!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="../dist/output.css">
<title>Hello Tailwind</title>
</head>
<body>
<div class="bg-indigo-500 w-100">
Hi,Mr Orkitt
</div>
</body>
</html>Well, Now compile and run our code, On terminal run this commands.
npm run compile
After compiled successfully, you can now open index page with Live Server and see the magic. Thank You.