Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
This is for beginners
Get started
Installation :
by cdn link -
- Add cdn link in the head tag
<script src="https://cdn.tailwindcss.com"></script>
<!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>
- Add tailwind.config in head tag after the cdn link
<script>
tailwind.config = {
theme: {
extend: {
colors: {
myblue: "#3944F7",
myred: "#B4161B",
mygray: "#CAD5E2",
},
},
},
};
</script>
here is how :
<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>Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
myblue: "#3944F7",
myred: "#B4161B",
mygray: "#CAD5E2",
},
},
},
};
</script>
</head>
For beginners installation is done now. let's move on next part.
Layout
- Container
Tailwind’s container does not center itself automatically and does not have any built-in horizontal padding. To center a "container", use the 'mx-auto' utility:
<div class="container mx-auto">
<!-- ... -->
</div>
When we create a div along this we create a container class. The container class also includes responsive variants like
md:containerby default that allow you to make something behave like a container at only a certain breakpoint.
Add custom Value on Tailwind CSS 😎
bg-[#fff]
bg-[#2b2b2b]
mt-[20px]
Add Custom Background 😎
bg-[url('/img/hero-pattern.svg')]
Install Tailwind CSS using postCSS 😎
run below lines in your VS editor's command to set up tailwind CSS.
