Generate multiple CSS files for production, one per media

[hollandThomas]

This idea aims for small performance improvements regarding bundle sizes.

I understand that currently, Tailwind purposefully only generates one single CSS file for production, as highlighted in the Optimizing for Production section of the docs:

Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network.
With CSS files this small, you don’t have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that’s downloaded once and cached until you redeploy your site.

This is already pretty damn good and I basically agree with the general sentiment that this should be "good enough" for most cases. However, there is a possibility for further improvements:

The <link> HTML element, which lets you link to Tailwind's compiled CSS file, supports the media attribute:

This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.

Meaning, instead of linking to the the entire Tailwind file

<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.css>

it would be possible to link to multiple files, e.g.

<!--default styles-->
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.css">
<!--responsive-->
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.sm.css" media="(min-width: 640px)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.md.css" media="(min-width: 768px)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.lg.css" media="(min-width: 1024px)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.xl.css" media="(min-width: 1280px)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.2xl.css" media="(min-width: 1536px)">
<!--dark mode-->
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.sm.dark.css" media="(min-width: 640px) and (prefers-color-scheme: dark)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.md.dark.css" media="(min-width: 768px) and (prefers-color-scheme: dark)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.lg.dark.css" media="(min-width: 1024px) and (prefers-color-scheme: dark)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.xl.dark.css" media="(min-width: 1280px) and (prefers-color-scheme: dark)">
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.2xl.dark.css" media="(min-width: 1536px) and (prefers-color-scheme: dark)">

With this, the user agent would load only the CSS that's currently needed.

Remix (a newly open sourced web framework, for those unaware) for example recommends this approach, and so does GoogleChromeLabs. As mentioned above, this certainly wouldn't skyrocket Tailwind's performance metrics. It'd be a rather small improvement. If anything, it'd appeal to folks who deeply care about performance and web standards, and could thus add a nice little touch to Tailwind.

Without knowing Tailwind's codebase, I would assume that this might be a quick win and not terribly much work. However, this probably should not be the default but something that sits behind a flag, so that it still holds true that users don’t have to worry about complex solutions if they don't want to.

[aquaductape]

Any comments from tailwind maintainers? This would be a sick feature!

[adamwathan]

Definitely would be cool but definitely not a quick win and I don't even know if it's possible in a way that integrates nicely with other tools. For example there's no way for us to process one single CSS input file but somehow tell webpack to generate multiple CSS files and inject those <link> tags into the right place in your template without Tailwind also shipping a webpack plugin. We'd need to do the same for every other bundler too.

There are existing plugins for this sort of thing depending on how your project works though:

https://github.com/SassNinja/media-query-plugin
https://github.com/SassNinja/postcss-extract-media-query

[SamTyurenkov]

@adamwathan I followed your advice and tried to make it work with postcss-extract-media-query
it kinda works on first run, but fails when is triggered from --watch

Did you ever managed/tried to make it work? Could you share config?

I run:

npx tailwindcss -i ./styles/src/tailwind.css -o ./styles/dist/tailwind.css --watch=always

and my postcss.config.js is

const path = require( 'path' );

module.exports = {
   plugins: {
   	'postcss-import': {},
   	'tailwindcss/nesting': 'postcss-nesting',
   	//tailwindcss: {},
   	autoprefixer: {},
   	'postcss-extract-media-query': {
   		output: {
   			path: path.resolve( __dirname, 'styles/dist' ),
   			name: '[name]-[query].[ext]', // pattern of emited files
   		},
   		queries: {
   			'(min-width: 480px)': '480',
   			'(min-width: 800px)': '800',
   			'(min-width: 1024px)': '1024',
   			'(min-width: 1600px)': '1600',
   		},
   		extractAll: false,
   		stats: true,
   		config: {
   			plugins: {
   				'postcss-extract-media-query': {},
   				cssnano: {},
   			},
   		},
   	},
   	cssnano: {},
   },
};

[aquaductape]

One big issue on splitting styles based on media attribute that has prefers-color-scheme value, is that on sites that allow users to override OS prefers-color-scheme (via localstorage and adding dark class to root), the media will match the OS prefers-color-scheme and will download styles or images that don't match the site localstorage value.

For example, if user has set color scheme to dark on their operating system, but on the site user sets light theme to override OS scheme, on page refresh, the dark stylesheet will still load and apply.

<!--dark styles-->
<link rel="stylesheet" type="text/css" href="http://your.link.to/tailwind.dark.css" media="(prefers-color-scheme: dark)">

This only works for sites that don't allow users to toggle color scheme. But almost every site that has schemes offer custom scheme so this is pretty much useless unless css working group adds a new media query that can read localstorage or session in some way.

[ekwoka]

Not sure what the issue there is though. you wouldn't use media query...

[ekwoka]

To add to this discussion, the @import allows media queries to define other files to download, if the concern is that tailwind wants a single entry point file.