Mojocss js file is too big (not small)

[liigo]

Mojocss docs says:

While a normal project typically requires at least 100kb of CSS to handle the styling,

I doubt it is not ture. Can you give us some real eaxmples / projects that have more than 100kb CSS?

Mojo requires only a single ~50kb (15kb gzipped) JS file to handle the styling of any size project.

A normal tailwind project only generate .css files less than 10kb (before gzipped). So why we need a ~50kb mojo.mini.js?

link: https://mojocss.com/docs/guide/what-is-mojocss#file-size

[mimze]

Absolutely, I understand your concern. While it's true that smaller projects might have smaller CSS files, as projects scale, their CSS tend to grow significantly. This is especially true for projects with complex styling needs or large design systems.

One of the great advantages of Mojo CSS is its fixed cost. Regardless of the size of your project, Mojo only requires a single ~50kb (15kb gzipped) JS file for styling. This means that as your project expands, you won't see a corresponding increase in file size. This can be particularly beneficial in maintaining performance and managing resources efficiently.

Also, it's important to mention that the upcoming release of Mojo CSS version 0.2 is designed to be even smaller, coming in at just 42kb. What's more, the folks at Mojo are dedicated to continuously improving and optimizing it, meaning it'll likely become even lighter in the future.

As for examples of Tailwind CSS projects with CSS files exceeding 100kb, Tailwind showcases several such projects on their own website:

1. tailwindcss.com - 296kb CSS File: https://tailwindcss.com/_next/static/css/1430dbbb70871fa4.css

2. planetscale.com - 283kb CSS File: https://planetscale.com/_next/static/css/0422ea85bcc04504.css

3. loom.com - 178kb CSS File: https://www.loom.com/_next/static/css/dadc664e13c2b244.css

4. turbo.build - 100kb CSS File: https://turbo.build/_next/static/css/81b499413d3877de.css

5. wealthfront.com - 328kb CSS File: https://www.wealthfront.com/_next/static/css/318fb351e8f15fc5.css

6. openai.com - 505kb (At least half of it is generated by tailwindcss) CSS File: https://openai.com/_nuxt/entry.d3d988d1.css

[liigo]

So I've done some research work, try to find out why do tailwind generates so much large css files for websits you listed.

My preliminary finding is, there are full of repeated stuff in the generated css.

Analysis of wealthfront.com's CSS:

It contains ...

• @meida: 110kb and many more
• themes: 82kb
• text: 10kb
• paddings: 9kb
• ...

There are ...

• 89 .bg-* background colors defined in it.
• 113 .text-* font size defines in it.
• 153 padding defines in it, including 20 .px-*s, 23 .py-*s, 20 .pl-*s, 17 .pr-*s, 31 .pt-*s, 26 .pb-*s, and 16 .p-*s.

The site uses many classes, and so tailwind generates many class definitions on demand.

But do you believe it? As a normal website, who need to use so many (almost all) bg colors, font sizes, paddings?

It's not a normal website.

Other websites have similar situations. tailwindcss.com is the exception, its docs has many usage examples, see https://tailwindcss.com/docs/padding , so it's reasonable to get a large css file.

---

wealthfront.com use almost all paddings from p-0 to p-12 (but not all, e.g. there is no p-7 and p-9)

.p-0 { padding: 0 }

.p-1 { padding: .25rem }

.p-10 { padding: 2.5rem }

.p-2 { padding: .5rem }

.p-3 { padding: .75rem }

.p-4 { padding: 1rem }

.p-5 { padding: 1.25rem }

.p-6 { padding: 1.5rem }

.p-8 { padding: 2rem }

.p-[12px] { padding: 12px }

.p-[50px] { padding: 50px }

.p-large { padding: var(--tk-spacing-large) }

.p-medium { padding: var(--tk-spacing-medium) }

.p-small { padding: var(--tk-spacing-small) }

.p-xsmall { padding: var(--tk-spacing-xsmall) }

.p-xxsmall { padding: var(--tk-spacing-xxsmall) }