@olenzilla/vite-plugin-tailwindcss-spritesmith v1.0.1

DEPRECATED - Please use @olenzilla/tailwindcss-plugin-spritesmith instead

A Vite plugin for creating:

• a spritesheet image combining a folder of images into a single image
• instead of creating a CSS file with the classes for each sprite, a TailwindCSS plugin that generates TailwindCSS utilities for each sprite.

Given an image called example.png in the configured sprites folder, this plugin allows you to use classes like sprite-example with all available Tailwind variants like hover:sprite-example and md:sprite-example.

Also, unlike the default spritesheet styles generated by webpack-spritesmith, the sprite styles generated by this plugin can be resized. So for instance, you can use max-w-[25px] sprite-example and it will ensure the sprite is not larger than 25px, without distorting the image. And if you explicitly set a width and height like w-[10px] h-[25px] sprite-example, the sprite will be deformed as expected.

Headline

When used in combination with Prettier and prettier-plugin-tailwindcss, this allows you to have autocompletion for all sprite related classes for your sprites assembled into spritesheets by Spritesmith.

Basic Usage

In your vite.config.ts:

import { defineConfig } from 'vite'
import { vite as tailwindSpritesmithPlugin } from '@olenzilla/vite-plugin-tailwindcss-spritesmith'

export default defineConfig({
	plugins: [
		tailwindSpritesmithPlugin(
			{
				spritesheets: [
					{
						// These images:
						spriteImageGlob: 'assets/sprites/*.png',
						// Will be stitched together into a spritesheet image here:
						outputImage: 'assets/target/sprites.png',
						// Optional:
						// outputBackgroundImage(outputImage) {
						// 	return `url(${outputImage})`
						// },
					},
				],
			},
			// And all the corresponding TailwindCSS utilities will be output here:
			'tailwindcss-spritesmith-utilities.json',
		),
		// ...
	],
})

Then pass the file the Vite plugin creates to the corresponding TailwindCSS plugin in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
	// ...
	plugins: [
		require('@olenzilla/vite-plugin-tailwindcss-spritesmith').tailwind(
			require('./tailwindcss-spritesmith-utilities.json'),
		),
		// ...
	],
}

Ideal Usage

This plugin can be configured to look at a single directory that contains subdirectories of sprite images, and automatically create separate spritesheets for each subdirectory, and each set of distinct image filetypes (i.e. PNGs vs JPGs):

Your vite.config.ts:

import { defineConfig } from 'vite'
import { vite as tailwindSpritesmithPlugin } from '@olenzilla/vite-plugin-tailwindcss-spritesmith'

export default defineConfig({
	plugins: [
		tailwindSpritesmithPlugin(
			{
				spritesheets: {
					spritesDirGlob: 'assets/sprites/*',
					outputDir: 'assets/sprites',
					// Optional:
					// outputImage(spritesDir: Path, extension: string) {
					// 	return path.join(
					// 	'assets',
					// 	`${spritesDir.name}.${ext}`,
					// )
					// },
					// extensions: ['png', 'jpg'],
				},
			},
			// And all the corresponding TailwindCSS utilities will be output here:
			'tailwindcss-spritesmith-utilities.json',
		),
		// ...
	],
})

And the same tailwind.config.js as before:

/** @type {import('tailwindcss').Config} */
module.exports = {
	// ...
	plugins: [
		require('@olenzilla/vite-plugin-tailwindcss-spritesmith').tailwind(
			require('./tailwindcss-spritesmith-utilities.json'),
		),
		// ...
	],
}

Acknowledgements

Thanks to @evont for vite-plugin-spritesmith and of course @twolfson for spritesmith