I can not build tailwindcss successfully-CodePudding

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

CodePudding user response：

Use `<script src="https://cdn.tailwindcss.com"></script>`

<!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" />
  </head>

  <body>
    <div >Hello</div>
    <script src="https://cdn.tailwindcss.com"></script>
  </body>
</html>

Output

CodePudding user response：

have you make a file tailwind.config.js? if not, you should make that file first and paste this code

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

after that, you link to ./style.css

Use <script src="https://cdn.tailwindcss.com"></script>

Use `<script src="https://cdn.tailwindcss.com"></script>`