Is there anyone know how to use twind with Nuxt? #182

rockmandash · 2021-05-12T11:17:42Z

rockmandash
May 12, 2021

I'm starting a project with Nuxt for SEO purposes.

Currently, there are several options for me:

Tailwind with JIT

I am currently using this package right now

This package works really well, and it supports @nuxt/storybook (the storybook for Nuxt) as well

The downside is no override: variant which is crucial to me, I make a lot of presentational components, the component composition that kind of stuff.

I've tried to use addVariant the Tailwind provided, but it's too hard for me, you will need to understand PostCSS and walk the tree to get the desired outcome.
WindiCSS

Really great package and it supports Nuxt as well.

But currently, no override: variant for WindiCSS as well.

I've read the windicss nuxt module source code, but still don't understand how it works, it seems like there is a WebPack plugin involved.
Twind Shim

Twind Shim is my best way to go, however, there are three reasons holding me back from using it.
1. My project is using FontAwesome, it comes with its own class name(fa) if I use twind.shim, it will output lots of warnings about the unknown rules in the console, I don't know if it's OK to ignore those warnings 😂, I know I can silence those temporarily.
2. Prevent FOUC, the <html lang="en" hidden> might kill my SEO because lots of articles are saying search engines will just ignore those invisible elements.
3. If I don't add hidden property, I will have FOUC 😂.

Is there anyone who has a working example combining Nuxt and Twind, I'm using pre-render mode, a temporary hack will be fine for me. 🙏

Answered by sastan

May 12, 2021

I hope this will help you:

There was/is a plan to have an ignorelist for warnings. For now I would just go with silent mode.

For the FOUC:

a nuxt plugin like we have for next – I'm happy to help here, but I know almost nothing about nuxt.
body style + class – <body style="opacity: 0" class="!opacity-1"> or <body style="display: hidden" class="!block">

umd with observe – start shimming as soon as possible

<head>
  <!--- these could all be combined into one script --->
  <!--- see this gist for an example: https://gist.github.com/sastan/c79d341b4bd2d1ec2096c437810b4f50 -->
  <script src="twind/twind.umd.js"></script>
  <script src="twind/observe/observe.umd.js"></script>
  <script>

View full answer

sastan · 2021-05-12T12:46:55Z

sastan
May 12, 2021
Maintainer

I hope this will help you:

There was/is a plan to have an ignorelist for warnings. For now I would just go with silent mode.

For the FOUC:

a nuxt plugin like we have for next – I'm happy to help here, but I know almost nothing about nuxt.
body style + class – <body style="opacity: 0" class="!opacity-1"> or <body style="display: hidden" class="!block">

umd with observe – start shimming as soon as possible

<head>
  <!--- these could all be combined into one script --->
  <!--- see this gist for an example: https://gist.github.com/sastan/c79d341b4bd2d1ec2096c437810b4f50 -->
  <script src="twind/twind.umd.js"></script>
  <script src="twind/observe/observe.umd.js"></script>
  <script>
    // Setup as needed
    twind.setup({})
    twindObserver.observe(document.element)
  </script>
</head>

Please let me know if I can help in any way.

7 replies

rockmandash May 12, 2021
Author

@tylerforesthauser OMG can't wait to see it!

tylerforesthauser May 12, 2021

Alrighty, here we go.

Codesandbox
GitHub Repo

The main things you'll want to look at are /modules/twind/ and the nuxt.config.js. If you have any questions, suggestions, concerns, whatever, please let me know!

sastan May 12, 2021
Maintainer

This looks great! Could that be refactored into a plugin within the use-with-twind repo?

rockmandash May 12, 2021
Author

@tylerforesthauser This is insane, I just test it out both on development and pre-rendered HTML on my project and it actually works!

And it works with @nuxt/storybook as well, I just tried.

This is totally a game-changer! 🤯

tylerforesthauser May 12, 2021

This looks great! Could that be refactored into a plugin within the use-with-twind repo?

@sastan Absolutely! I will submit a PR as soon as I can. 👍

Uh oh!

Is there anyone know how to use twind with Nuxt? #182

Uh oh!

Uh oh!

rockmandash May 12, 2021

Replies: 1 comment · 7 replies

Uh oh!

sastan May 12, 2021 Maintainer

Uh oh!

rockmandash May 12, 2021 Author

Uh oh!

tylerforesthauser May 12, 2021

Uh oh!

sastan May 12, 2021 Maintainer

Uh oh!

Uh oh!

rockmandash May 12, 2021 Author

Uh oh!

Uh oh!

tylerforesthauser May 12, 2021

rockmandash
May 12, 2021

Replies: 1 comment 7 replies

sastan
May 12, 2021
Maintainer

rockmandash May 12, 2021
Author

sastan May 12, 2021
Maintainer

rockmandash May 12, 2021
Author