顺风风格问题

问题描述 投票:0回答:1

我在使用 npm 安装 Tailwind CSS 时遇到问题。当我使用 npm 安装 Tailwind CSS 时,我在生成的文件中最多只能找到 1758 行 CSS,其余代码似乎丢失了。奇怪的是,当我直接使用脚本 CDN 时,一切正常。我尝试过更新 npm,但问题仍然存在。

css responsive-design tailwind-css tailwind-ui tailwind-elements
1个回答
0
投票
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
© www.soinside.com 2019 - 2024. All rights reserved.