Reduce Tailwind CSS bundle size for unused components #877

benjamincanac · 2023-10-27T09:34:00Z

No description provided.

jrutila · 2023-10-30T06:18:49Z

Related to #802 do you want separate issues on reducing the unused colors (this could be an option parameter, even) and reducing bundle size for unused components?

benjamincanac · 2023-10-30T09:14:44Z

Removing unused colors is already done through Smart safelisting and I already answered here #802 (comment) on how to select only desired colors, not sure why you want to create another issue.

jrutila · 2023-10-30T14:55:14Z

I read the docs and that's what nuxt/ui is trying to achieve. But it doesn't seem to work as intended so I created a bug: #889. We can continue this color discussion there and leave the ticket for the unused component thing.

ronenteva · 2023-10-31T21:15:11Z

Sorry to jump in, but simply adding @nuxt/ui to an empty project creates an inline css of 243kb.
Is that related to this issue or something that I'm missing from the documentation?

benjamincanac · 2023-10-31T21:16:41Z

It is related to this issue, the whole config is taken into account by Tailwind: https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts

jrutila · 2023-11-01T04:10:37Z

Is that ui.config file now available for Tailwind to do it's magic? Or does it do something more in nuxt/ui code? I am trying to scope the fix here.
If nuxt/ui would know which components the dev has used in the code it could cherry-pick those definitions from the config file for Tailwind, right?

divine · 2023-11-01T11:10:01Z

Hello,

This is pretty serious affecting performance.

@Atinux can this pushed forward please?

Thanks!

raf202 · 2023-11-01T13:13:03Z

The build size is huge when using Static Site. Weirdly, NuxtUI is adding the tailwind styles inside a <style> tag inside all .HTML files. Is something broken or am I missing something?

ronenteva · 2023-11-07T07:55:39Z

@benjamincanac any timeline for this?
It's labeled as enhancement but I'm sure for many this issue is a deal-breaker for using @nuxt/ui

ineshbose · 2023-11-07T07:57:32Z

Hey! We're researching into this and hoping to come up with a breakthrough soon. 😄

jrutila · 2023-11-07T13:21:26Z

The build size is huge when using Static Site. Weirdly, NuxtUI is adding the tailwind styles inside a <style> tag inside all .HTML files. Is something broken or am I missing something?

@sigmaxf I think this is more of nuxt's features. Try to fiddle with https://nuxt.com/docs/guide/going-further/experimental-features#inlinessrstyles

ineshbose · 2023-11-23T18:34:14Z

There should be a workaround available for this now, if someone would like to report back on this please.

See "Tailwind CSS bundle" section on release notes for https://github.com/nuxt/ui/releases/tag/v2.11.0.

ronenteva · 2023-11-24T07:52:51Z

@ineshbose thanks! your help is highly appreciated!

I've tried excluding everything (on an empty project), and went down from 253kb to 185kb.
Big improvement but still huge for production.

Just to understand the issue, is it not possible to load nuxt ui before cssnano?

Here's what I excluded, if it helps anyone:

      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/data/table.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/accordion.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/alert.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/avatar.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/avatarGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/badge.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/button.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/buttonGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/chip.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/dropdown.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/kbd.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/meter.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/meterGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/progress.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/checkbox.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/radioGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/radio.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/toggle.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/formGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/select.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/textarea.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/selectMenu.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/range.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/input.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/card.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/container.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/divider.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/skeleton.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/breadcrumb.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/commandPalette.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/pagination.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/verticalNavigation.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/contextMenu.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/modal.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/notification.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/notifications.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/popover.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/slideover.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/tooltip.mjs')

jrutila · 2023-11-24T09:34:40Z

@ronenteva have you limited the amount of color entries in the final outcome? It has an impact, too. See #889

ronenteva · 2023-11-24T10:12:03Z

@jrutila thanks! it's now down to 102kb

import colors from 'tailwindcss/colors';
import {resolve} from 'pathe';

export default {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      green: colors.green
    }
  },
  content: {
    files: [
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/data/table.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/accordion.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/alert.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/avatar.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/avatarGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/badge.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/button.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/buttonGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/chip.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/dropdown.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/kbd.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/meter.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/meterGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/elements/progress.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/checkbox.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/radioGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/radio.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/toggle.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/formGroup.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/select.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/textarea.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/selectMenu.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/range.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/forms/input.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/card.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/container.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/divider.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/layout/skeleton.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/breadcrumb.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/commandPalette.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/pagination.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/navigation/verticalNavigation.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/contextMenu.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/modal.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/notification.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/notifications.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/popover.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/slideover.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/tooltip.mjs')
    ]
  }
};

ineshbose · 2023-11-24T13:34:03Z

Just to understand the issue, is it not possible to load nuxt ui before cssnano?

cssnano should include all the styles from NuxtUI after build.

ineshbose · 2023-11-24T13:34:51Z

Let me add another solution to this problem: @nuxtjs/critters

This should remove unused styles from your page, but few things to note - load this module BEFORE @nuxt/ui, and it only works for generate/prerendered pages.

ManasMadrecha · 2023-12-02T04:11:03Z

@ineshbose Will the critters solution work for ssr:false and npm run generate project?

ineshbose · 2023-12-09T15:32:15Z

Will the critters solution work for ssr:false and npm run generate project?

It needs SSR enabled. Rest, you can exclude files from Tailwind content (a for-loop or even a Nuxt module would be quite elegant) for now.

champ7champ · 2024-02-18T20:38:02Z

How painful it is to look at this in 2024

ronenteva · 2024-02-24T10:02:15Z

@benjamincanac @ineshbose
I'm sorry to bump the issue but I want to make sure you guys understand that anyone who relies on SEO can't afford using @nuxt/ui until this is fully resolved.

ineshbose · 2024-02-24T10:16:39Z

@ineshbose

I'm sorry to bump the issue but I want to make sure you guys understand that anyone who relies on SEO can't afford using @nuxt/ui until this is fully resolved.

Hey! Thanks for pinging - this issue is still in mind. Unfortunately content detection is a tricky part of Tailwind JIT and a component library based on Tailwind would have such limitations. We'll have to come up with some ground breaking stuff to have dynamic content based on import (contributions welcome) which all of TW community would benefit from, but till then we have a workaround available.

ronenteva · 2024-02-26T10:06:13Z

Let me add another solution to this problem: @nuxtjs/critters

This should remove unused styles from your page, but few things to note - load this module BEFORE @nuxt/ui, and it only works for generate/prerendered pages.

Do you mind sharing an example of how to use critters to remove the unused styles?
I couldn't get it to make any difference.

Another workaround is to use nuxt-purgecss and safelist all classes in the components in use.

benjamincanac · 2024-02-26T14:02:16Z

@ronenteva Excluding all of the config files did not do the trick?

ronenteva · 2024-02-27T03:18:59Z

@benjamincanac I stopped using it at some point but I honestly can't remember what wasn't working.
I'll give it another try and let you know.

Update:
I tested again, adding @nuxt/ui to a clean project and excluding all components, still adds 114kb of inline style.

ronenteva · 2024-02-27T05:55:01Z

If dark mode is not needed, you can save another 30k by setting:

nuxt.config.js

  colorMode: {
    preference: 'light'
  }

tailwind.config.js

  darkMode: []

yuzh2001 · 2024-04-27T06:57:32Z

Providing a workaround:

first, build you app and launch it.
curl http://localhost:3000 (for example)
copy the longest <style>line starting as /* tailwind 4.3.1 ...
save it to a seperate css file and upload it to cdn
in nuxt.config.js/ts, set tailwindcss:{cssPath:false}, and in app:{head:{link:{... import the css on cdn

significantly drop from ~700kb to ~160kb

(the 160kb is because another ui library I use.

benjamincanac added the enhancement New feature or request label Oct 27, 2023 — with Volta.net

benjamincanac mentioned this issue Oct 27, 2023

[Performance] Why nuxt lab UI cannot pure css? #802

Closed

benjamincanac added the help wanted Extra attention is needed label Oct 27, 2023 — with Volta.net

benjamincanac mentioned this issue Oct 30, 2023

Nuxt/Tailwind generates unnecessary color css definitions on colors that are not used in the project #889

Open

benjamincanac mentioned this issue Nov 1, 2023

A bulk of tailwind styles is defined within the <style> element of every rendered static .html page #900

Closed

ineshbose mentioned this issue Nov 8, 2023

refactor(config): break ui.config.ts into separate files #930

Merged

8 tasks

benjamincanac mentioned this issue Nov 29, 2023

fix(components): move remaining classes to config #1039

Merged

8 tasks

benjamincanac mentioned this issue Jan 22, 2024

nuxt Using nuxt/ui, the packaged css file is particularly large, is there any optimization method? #1262

Closed

ineshbose mentioned this issue Feb 5, 2024

Why are unused styles not cleared? nuxt-modules/tailwindcss#803

Closed

benjamincanac mentioned this issue Feb 19, 2024

Pulls a huge tailwindcss!(( #1375

Closed

benjamincanac mentioned this issue Mar 4, 2024

v3 #1289

Open

8 tasks

benjamincanac added the v3 #1289 label Mar 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reduce Tailwind CSS bundle size for unused components #877

Reduce Tailwind CSS bundle size for unused components #877

benjamincanac commented Oct 27, 2023

jrutila commented Oct 30, 2023

benjamincanac commented Oct 30, 2023 •

edited

jrutila commented Oct 30, 2023

ronenteva commented Oct 31, 2023

benjamincanac commented Oct 31, 2023

jrutila commented Nov 1, 2023

divine commented Nov 1, 2023

raf202 commented Nov 1, 2023 •

edited

ronenteva commented Nov 7, 2023

ineshbose commented Nov 7, 2023

jrutila commented Nov 7, 2023

ineshbose commented Nov 23, 2023

ronenteva commented Nov 24, 2023

jrutila commented Nov 24, 2023

ronenteva commented Nov 24, 2023

ineshbose commented Nov 24, 2023

ineshbose commented Nov 24, 2023

ManasMadrecha commented Dec 2, 2023

ineshbose commented Dec 9, 2023

champ7champ commented Feb 18, 2024

ronenteva commented Feb 24, 2024

ineshbose commented Feb 24, 2024

ronenteva commented Feb 26, 2024

benjamincanac commented Feb 26, 2024

ronenteva commented Feb 27, 2024 •

edited

ronenteva commented Feb 27, 2024

yuzh2001 commented Apr 27, 2024

Reduce Tailwind CSS bundle size for unused components #877

Reduce Tailwind CSS bundle size for unused components #877

Comments

benjamincanac commented Oct 27, 2023

jrutila commented Oct 30, 2023

benjamincanac commented Oct 30, 2023 • edited

jrutila commented Oct 30, 2023

ronenteva commented Oct 31, 2023

benjamincanac commented Oct 31, 2023

jrutila commented Nov 1, 2023

divine commented Nov 1, 2023

raf202 commented Nov 1, 2023 • edited

ronenteva commented Nov 7, 2023

ineshbose commented Nov 7, 2023

jrutila commented Nov 7, 2023

ineshbose commented Nov 23, 2023

ronenteva commented Nov 24, 2023

jrutila commented Nov 24, 2023

ronenteva commented Nov 24, 2023

ineshbose commented Nov 24, 2023

ineshbose commented Nov 24, 2023

ManasMadrecha commented Dec 2, 2023

ineshbose commented Dec 9, 2023

champ7champ commented Feb 18, 2024

ronenteva commented Feb 24, 2024

ineshbose commented Feb 24, 2024

ronenteva commented Feb 26, 2024

benjamincanac commented Feb 26, 2024

ronenteva commented Feb 27, 2024 • edited

ronenteva commented Feb 27, 2024

yuzh2001 commented Apr 27, 2024

benjamincanac commented Oct 30, 2023 •

edited

raf202 commented Nov 1, 2023 •

edited

ronenteva commented Feb 27, 2024 •

edited