Having trouble getting Tailwind to discover and bundle classes that are included dynamically from the database in sveltekit.

[Jorenm]

I read through the doc here (https://tailwindcss.com/docs/content-configuration#dynamic-class-names), and it lead me to try including my statically generated files which do include the plain text class names I'm missing using this tailwind.config.js

export default {
	relative: true,
	content: ['./src/**/*.{html,js,svelte,ts}', './.svelte-kit/**/*.{html,js,svelte,ts,json}'],
	theme: {
		extend: {},
	},
	plugins: [
		require("daisyui"),
	],
}

I searched through the .svelte-kit folder and the prerendered html files among other files do include the classes I need, but there doesn't seem to be any difference and my classes still aren't bundled. Does Tailwind perhaps run before Sveltekit builds static files? If so, is there a workaround?

The only thing I can think of to fix this is a brute-force approach where I crawl my entire DB for classes and shove them in a throwaway file to be scanned as a pre-build script, but that seems a bit forced.

[alex-krasikau]

Hello @Jorenm!

Tailwind CSS operates at the build stage, scanning files specified in the content section and generating the final CSS based on the classes encountered during this file scan.

In short, if Tailwind enters /src/index.ts and encounters a class name in any form, it will be included in the generated CSS:

// /src/index.ts

// 1.
<div class="mt-4">...</div>

// 2.
// mt-4

// 3.
const offsetByType = {
  "sm": "mt-2",
  "md": "mt-4",
  "lg": "mt-8",
}

Any of the above combinations will result in Tailwind adding the following style to the resulting CSS:

.mt-4 {
  margin-top: 1rem;
}

Tailwind does not analyse compiled files, run code, or read actual webpage content— it only scans file system content.

You have attempted to solve this by adding the directory containing the final static files to content. This approach might not be reliable because Tailwind operates before files appear in this build destination directory, and there's a high likelihood that Svelte Kit does housekeeping and cleans the build destination directory before a new build.

Downloading the data from the database sounds like the most straightforward solution to this issue. Alternatively, if you use a limited set of classes, you can add them to a safelist. However, when dealing with dynamic data from an external database, the best solution is likely to use inline styles.

I hope this helps. Let me know if you have other questions on this topic.

[Jorenm]

Alright thanks. I was hoping there was some mistake in my config, but I guess I have to actually work for my dinner. :P

[Jorenm]

I got a solution working which I thought I'd post for anyone that needs to achieve something similar. I just fetch all my db content and parse out and store all potential tailwind classes, and point to them in the config. Might not be a perfect or complete solution, but the proof of concept works.

Add

  "prebuild": "node prebuild/prebuild.mjs",
  "build": "vite build",

to package.json

prebuild.mjs

import {createClient} from "@sanity/client";

import { fileURLToPath } from 'url';
import { dirname } from 'path';
import path from 'path'
import fs from 'fs'

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const prebuildFolder = path.join(__dirname, '../')

const dataset = 'production'

const client = createClient({
	projectId: 'projectIdHere',
	dataset: dataset,
	apiVersion: "2024-01-09",
	useCdn: false,
	token: 'tokenHere'
});

fs.writeFileSync(`${prebuildFolder}/static/tailwind_prefetch.txt`, JSON.stringify(await client.fetch('*')).match(/[\w:-]{2,}/g).join(' '))

And in tailwind.config.js
content: ['./src/**/*.{html,js,svelte,ts}', ${prebuildFolder}/tailwind_prefetch.txt],

[geantas]

After few adjustments to fit my setup, this works just fine & solves the problem. Thanks for sharing!