Front End, Tutorials, CSS
January 10,2023
In this post we'll teach you how to get started with Tailwind CSS, the highly popular CSS framework that allows you to create beautiful responsive web pages fast!
Make sure to watch the video version above, and don't forget to hit the like button and subscribe to our Youtube Channel.
In this video we use the npm installation, which is the most recommended one for production. See the basic steps below:
npm install -D tailwindcss
npx tailwindcss init
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
This command will watch for changes in your files and generate the output CSS file.
{
"scripts": {
"gen": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}
}
Now instead of typing the long code shown on step 4, every time you open your project, you can just run:
npm run gen
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
If you are not comfortable using NPM and Node.js you can also use the CDN installation to get started quickly.
Just add the Tailwind script to the head sectioin of your html file:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Top-Rated Online Instructor
Ivan is the founder of Daweb Schools and top Udemy instructor currently teaching 17 courses in 4 languages with 420.000+ students worldwide.
Related Blogs