ui How do you define tailwind's css classes in an external stylesheet

Description

I tried to build my ssr app using nuxt ui. However, I suddenly noticed that the following tailwindcss in the SSR-rendered html document was much larger than the actual html content:

<html data-capo="">
    <head>
        <style>
           /* Even a very simple page has 7000-8000 lines of content */
            /*! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com*/
            *,:after,:before {
                border-color: rgb(var(--color-gray-200)/1);
                border-style: solid;
                border-width: 0;
                box-sizing: border-box
            }

            :after,:before {
                --tw-content: ""
            }
            .......
       </style>
 </head>
  <body>
        ........
  </body>
</html>

Since the html content rendered by ssr is dynamic, it is not possible to use a cdn to speed up its distribution. Is there a way to error the css class definitions generated by tailwind into the external styles, which makes it easy to use a cdn to accelerate the css static files, further reducing the size of the SSR-rendered html document, and reducing the bandwidth cost of the server

Aug 12 '24 06:08 ShipinZ

This issue is stale because it has been open for 30 days with no activity.

Sep 12 '24 01:09 github-actions[bot]

Hi @JoyfulAndSpeedyMan 👋

Can you try to disable the inlineStyles?

Sep 12 '24 08:09 Tragio

This works great! Thank you very much!

Hi @JoyfulAndSpeedyMan 👋

Can you try to disable the inlineStyles?

Sep 13 '24 06:09 ShipinZ