我在使用 npm 安装 Tailwind CSS 时遇到问题。当我使用 npm 安装 Tailwind CSS 时,我在生成的文件中最多只能找到 1758 行 CSS,其余代码似乎丢失了。奇怪的是,当我直接使用脚本 CDN 时,一切正常。我尝试过更新 npm,但问题仍然存在。
If you follow the tailwindcss document, there will be no problem.
Do the following steps in order
1 - npm install -D tailwindcss
2 - npx tailwindcss init
3 - Make sure the following codes are in the tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*.html"],
theme: {
extend: {},
},
plugins: [],
}
4 - Create an input.css file, and put the following values in it
@tailwind base;
@tailwind components;
@tailwind utilities;
5 - Add the following command inside the package.json file
"scripts": {
"dev": "npx tailwindcss -i ./css/input.css -o ./dist/output.css --watch"
},
6 - Inside your html document, add the output css file and tailwind classes
Use for styling
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
7 - Now run the dev command in the package.json file or run the following
code in the terminal
npm run dev