Adding very basic tailwind classes to old project

So what I ended up doing was compiling down just the classes I needed. I'll write my findings in case it could help anyone.

1. You can get tailwind to compile classes that are not in you project by using the safelist option in the configuration.

it's possible to define regular expression that tells Tailwind what to compile anyway. I started another blank project with up to date node (v20).

So when I compiled ALL the classes, I got a css file of 22Mb.

2. The next step was to try different patterns to include so the file could contain just the "basic" (very subjective) things I needed.

This is the result file:

/** @type {import('tailwindcss').Config} */ export default { content: ['./index.html'], theme: { extend: {}, }, plugins: [], safelist: [{ // display 6.08 kB pattern: /^(display|flex|grid|inline|block|contents|hidden|table|table-row|table-cell|flow-root|inline-block|inline-flex|inline-grid)/, }, { //position 1.00 kB pattern: /^(static|fixed|absolute|relative|sticky)/, }, { // width and height 11.20 kB pattern: /^(w-|h-|min-w-|min-h-|max-w-|max-h-)/, }, { // margins and paddings 26.23 kB pattern: /^(-?)(m-|mt-|mr-|mb-|ml-|mx-|my-|p-|pt-|pr-|pb-|pl-|px-|py-)/, }, { // position 8.77 kB pattern: /^(-?)(top|bottom|left|right)/, }, { // transition & animation 3.26 kB pattern: /^(duration-|ease-|delay|transition-|animate)/, }, { // border and shadow (no colors) 5.02 kB pattern: /^(border-\w(-\w)?$|shadow[\w-]{0,6}$)/, }, { // more display stuff 4.74 kB pattern: /^(col-|row-|float|clear|overflow-)/, }, { //more stuff I needed 5.23 kB pattern: /^(visible|invisible|hidden|z-|order-|cursor|rotate|opacity)/, } 

], };

I wrote the compiled size of CSS (before gzip compression) in the comments of each section.

3. The complete CSS file size was: 56.79 kB │ gzip: 10.85 kB and that is something I could live with.

I intentionally did not include: colors, inset, ring, stroke, text, translate, scale, rotate, skew, outline, background and some other stuff.

Hop it will help someone if a similar need will arise