Table of Contents
Issue
I am building a website with tailwindcss.
First,I run npm init -y to init my project,then I run npm install tailwindcss to install tailwindcss.
Then,I create /src/input.css and add this content to this file.
@tailwind base;
@tailwind components;
@tailwind utilities;
I run npx tailwindcss -i ./src/input.css -o ./public/style.css to generate style.css file. But my
style.css file only have 500 lines.I think It should have 2w lines. Then I link to this file in my index.html.I can not use all taiwindcss style,such as,container,mx-auto.
How can I use tailwindcss style in my html?Please help me.Thanks a lot.
this is my file structure
public
|_index.html
|_style.css
src
|_input.css
Solution
1. Using Tailwind-cdn
<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>
<script>
tailwind.config = { // 👈 Your tailwind.config.js here
theme: {
extend: {
colors: {
clifford: "#da373d",
},
},
},
};
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<h1 class="text-3xl font-bold text-red-700">Hello world!</h1>
</body>
</html>
Output
2. Using tailwind CLI or PostCSS
1. Know about your file structure. Use:
public
|_ tailwind_base.css
👆 File from which the output.css is produced
@tailwind base;
@tailwind components;
@tailwind utilities;
|_ output.css
src
|_ index.html
👆 Link with the output.css using
<link href="../public/output.css" rel="stylesheet" />
Watch it as
npx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch
Specify your html/js in tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
Use tailwindcss classes happily in your index.html file 😇
Mistake in your github link:
Your html is inside dist folder. But you are specifying path to src folder
Change
content: ["./src/**.*.{html,js}"]
to
content: ["./dist/**/*.{html,js}"]
Alternatively
Place your html file inside the src and link properly with the output.css
and use
content: ["./src/**.*.{html,js}"]
Refer https://tailwindcss.com/docs/installation
Answered By – Krishna Acharya
Answer Checked By – Mildred Charles (BugsFixing Admin)