Tailwindcss-module: Nuxt-Tailwind browser freezes when inspecting elements and modifying styles(ALL BROWSERS(relevant) TESTED)

[TNortnern]

Version

@nuxtjs/tailwindcss: 3.0.2
nuxt: 2.14.5

Reproduction Link

Clone: https://github.com/TNortnern/Provisionade-fe

Steps to reproduce

Literally on any browser, inspect a element on the home page and uncheck a fews styles then try to go inspect another element, uncheck it's style, eventually it will freeze upon unchecking some elements styles and won't allow you to inspect or change styles for a few seconds.

What is Expected?

For the browser to not freeze for 5 seconds when trying to do browser styling

What is actually happening?

It's just freezing, I made a gif here to better demonstrate.

[TNortnern]

After further testing, it just seems like the tailwind/ui plugin is the root cause. removing it lowers the intensity but it still exists..

[TNortnern]

To anyone experiencing the bug, it's best to just integrate tailwindcss yourself for now. It fixes the issue, something is up with this module because on dev it comes out to about 1GB with the module but with manually adding tailwind it's about 400mb.

[Atinux]

Hi @TNortnern

Do you use the default configuration for the module?

[TNortnern]

@Atinux Yes I did. Fresh nuxt-tailwind installation

[Atinux]

@TNortnern I tried locally but could not reproduce this bug, do you have any informations about your computer?

[gino]

I have the same issue. I have a custom Tailwind configuration file though, but my whole tab also freezes when I use Chrome Devtools to update anything.

Edit: This might be an actual Tailwind issue.

[taythebot]

I'm having this issue as well. The following fix from Tailwindcss issue did not work for me.

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

Nuxt is reporting an impressive 1.09GB of memory usage. Did anyone find a workaround to this issue?

[gino]

I'm having this issue as well. The following fix from Tailwindcss issue did not work for me.

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

Nuxt is reporting an impressive 1.09GB of memory usage. Did anyone find a workaround to this issue?

I can confirm that the problem still exists after trying /*! @import */, and the memory usage is indeed pretty high... :/

[TNortnern]

Looks like the issue was due to tailwind as @gino said. If you just upgrade your tailwind to latest this issue will dissapear.