Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot use HTML style tag with Vite to apply a theme #16036

Open
muuvmuuv opened this issue Jan 30, 2025 · 1 comment · May be fixed by #16069
Open

Cannot use HTML style tag with Vite to apply a theme #16036

muuvmuuv opened this issue Jan 30, 2025 · 1 comment · May be fixed by #16069

Comments

@muuvmuuv
Copy link

muuvmuuv commented Jan 30, 2025 •
edited
Loading

What version of Tailwind CSS are you using?

v4.0.1

What build tool (or framework if it abstracts the build tool) are you using?

Latest Vite with autoprefixer

What version of Node.js are you using?

NodeJS v22.10.0

What browser are you using?

Brave

What operating system are you using?

macOS

Reproduction URL

<!DOCTYPE html>
<html>
	<head>
		<style>
			@import "tailwindcss";
			@layer components {
				h1{
					@apply text-2xl;
				}
			}
		</style>
	</head>
	<body>
    <h1>Test</h1>
  </body>
</html>

Vite config

module.exports = {
	root: "./example",
	base: "./",
	appType: "custom",
	build: {
		rollupOptions: {
			input: "./example/test.html",
		},
		outDir: "./example-min/",
		emptyOutDir: true,
		copyPublicDir: false,
	},
	plugins: [
		tailwindcss(),
	],
	css: {
		postcss: {
			plugins: [autoprefixer()],
		},
	},
}

Describe your issue

We have single HTML files which are report templates in a facility for analysis reportings that are styled with tailwindcss. These are later processed by Vite to reduce their size and to process tailwindcss classes. We aren't able to support external CSS or JS here since these templates are generated by another tool which has its own syntax and templates. When processing these HTML with Vite tailwindcss seems to ignore inline CSS even with text/tailwindcss. Using the CDN works fine, but our reports need to work offline (companies that size do not allow these machines to have internet access on pruporse ofc). The reason we use the style tag is because that way we can provided a versioned theme to each report template and do not need to touch our template files which consist of many smaller modules that we do not want to touch that often and because each customer can have its own styled theme or custom styles for individuallity.
@muuvmuuv
Copy link
Author

At best it would be if <style type="text/tailwindcss"> is allowed in Vite, taken by tailwind and later replaced with <style> so other post processors can like minify the contents if not already.

@philipp-spiess philipp-spiess linked a pull request Jan 30, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Vite: Transform <style> blocks in html files tailwindlabs/tailwindcss
1 participant
@muuvmuuv