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

Closed
muuvmuuv opened this issue Jan 30, 2025 · 4 comments · Fixed by #16069
Closed

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

muuvmuuv opened this issue Jan 30, 2025 · 4 comments · 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 mentioned this issue Jan 30, 2025
Merged
@philipp-spiess
Copy link
Member

Going to add support for this in the next patch release, thanks for your report 👍

@muuvmuuv
Copy link
Author

muuvmuuv commented Feb 2, 2025

Can you also test against text/tailwindcss? I think it behaves different in Vite as it will not be picked by it

@muuvmuuv
Copy link
Author

muuvmuuv commented Feb 4, 2025

That works pretty well, thank you! Just had to remove CDN and text/tailwindcss on post process but now we have a nice preview through CDN with all functionality and a reduced bundle in production!

		{
			name: "vite-plugin-remove-tailwindcss-cdn",
			apply: "build",
			transformIndexHtml: {
				order: "post",
				handler(html) {
					const nextHtml = html.replace(
						/<script src=.*?tailwindcss.*?script>/i,
						"",
					);
					return nextHtml;
				},
			},
		},
		{
			name: "vite-plugin-remove-text-tailwindcss",
			apply: "build",
			transformIndexHtml: {
				order: "post",
				handler(html) {
					const nextHtml = html.replace(/<style type=.*?>/i, "<style>");
					return nextHtml;
				},
			},
		},

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
2 participants
@philipp-spiess @muuvmuuv