Adding very basic tailwind classes to old project

I'm working on a legacy project (angular 4, node 10.9). Unfortunately it won't get upgraded soon.

Is there a way to install the basic features of tailwind statically?

Either copy paste from somewhere or just build a minified CSS file (That wont be too big).

From what I'm reading the recommended option is from a CDN.

But I don't like it for several reasons, mainly that I don't have autocomplete options in my IDE, and it feels "hacky".

If you have a better idea \ experience, I'd love to hear.

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