It's possible to not load full Tailwindcss with CDN ?

[thomasop]

Hello, I make a website with vanilla HTML, CSS and JS. And I use Tailwindcss with CDN. I use Tailwindcss for most styles of my site but load all CDN is not good for performance in production. But I can't use Tailwindcss in another way like PostCSS or CLI. It's possible to include for example only margin style ? Or do you have a solution for improve the performance ?

(I work with an association and the previous team made the site like this and I can not change)

Thank you

[wongjn]

You really cannot use any form of Tailwind CSS locally? If not, you could consider using Tailwind Play to generate the CSS and then copy-paste into your project.

For margin rules, you could consider using a regular expression safelist like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: [
    {
      pattern: /^m.?-(\d+(.\d+)?|auto|px)$/,
    },
  ],
  // …
}

[thomasop]

thank you for your answer. What do you mean by using locally? If you are talking about using Tailwind CSS with PostCSS or CLI, the answer is no.

Tailwind Play looks good. When I generated CSS I put this in css file (I call css in head with link) and I no longer need to use Tailwindcss with CDN. Is that it?

[wongjn]

Indeed.

[thomasop]

I used Tailwind Play for the homepage and saw better performance. I gained 70ms of loading time. Before 100ms and now 30ms.
thank you !