[SOLVED] I can not build tailwindcss successfully

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

enter image description here

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)

Leave a Reply

Your email address will not be published. Required fields are marked *