My Simple Web Page HTML CSS can’t render tailwind css when I deploy in vercel. it was used successfully during development
enter image description here
but failed not to render the CSS when in production
index.html
<code> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../dist/output.css" rel="stylesheet" />
</head>
</code>
<code> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../dist/output.css" rel="stylesheet" />
</head>
</code>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../dist/output.css" rel="stylesheet" />
</head>
package.json
"scripts": { "tw:run": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch" },
input.css
<code>@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
.nav-anchor {
@apply cursor-pointer;
}
</code>
<code>@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
.nav-anchor {
@apply cursor-pointer;
}
</code>
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
.nav-anchor {
@apply cursor-pointer;
}
tailwind.config.js
<code>/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
</code>
<code>/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
</code>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
I hope the CSS can run properly when deployed
New contributor
Lumiere Mahotei is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.