feat: migrate to tailwind v3 #407

dargmuesli · 2021-12-10T00:25:33Z

Supersedes #405. Closes #406. I did all updates necessary I could think of.

Besides my update to jit & co I'd like to propose having this Nuxt plugin's documentation only include configuration specific to itself and not having it duplicate tailwindcss documentation which might get outdated here. But that's for another day.

dargmuesli

Here are some explaining notes.

dargmuesli · 2021-12-10T00:27:48Z

README.md

@@ -16,8 +16,6 @@
 ## Features

 - 👌&nbsp; Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
- 🗜&nbsp; PurgeCSS included for minimal CSS ⚡️


It's not included now anymore.

dargmuesli · 2021-12-10T00:27:59Z

README.md

@@ -16,8 +16,6 @@
 ## Features

 - 👌&nbsp; Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
- 🗜&nbsp; PurgeCSS included for minimal CSS ⚡️
- ⚡️&nbsp; Supports [Tailwind Just-In-Time](https://github.com/tailwindlabs/tailwindcss-jit)


That's the default engine now.

dargmuesli · 2021-12-10T00:28:13Z

docs/content/2.setup.md

@@ -77,26 +77,6 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie

 </d-alert>

-
-## Tailwind Just-In-Time


The default now, as mentioned above.

dargmuesli · 2021-12-10T00:28:21Z

docs/content/3.options.md

@@ -113,11 +113,9 @@ export default {
  tailwindcss: {
    config: {
      /* Extend the Tailwind config here */
-      purge: {


The new content syntax.

dargmuesli · 2021-12-10T00:28:35Z

docs/content/examples/2.dark-mode.md

@@ -5,6 +5,7 @@ csb_link: https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j
 fullscreen: true
 ---

+<!-- TODO: Replace with tailwind's native dark mode support. -->


No need for a plugin demo.

dargmuesli · 2021-12-10T00:29:30Z

docs/content/tailwind/1.config.md

-    }
-  }
+  // Whitelisting some classes to avoid content purge
+  safelist: [


The new way to do safelists.

dargmuesli · 2021-12-10T00:29:55Z

docs/package.json

@@ -11,9 +11,10 @@
  "license": "MIT",
  "homepage": "https://tailwindcss.nuxtjs.org",
  "devDependencies": {
+    "autoprefixer": "^10.4.0",


Shall be a dev dependency according to tailwind's installation instructions.

dargmuesli · 2021-12-10T00:30:18Z

example/components/CallToAction.vue

@@ -6,7 +6,7 @@
        <span class="block">Ready to dive in?</span>
        <span class="block text-indigo-600">Start your free trial today.</span>
      </h2>
-      <div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">


This is now a recommended shorthand.

dargmuesli · 2021-12-10T00:30:38Z

example/tailwind.config.js

@@ -1,3 +1 @@
-export default {
-  mode: 'jit'


The default now, you get it ;)

dargmuesli · 2021-12-10T00:31:05Z

src/index.ts

@@ -56,7 +56,7 @@ async function tailwindCSSModule (moduleOptions) {
    logger.info(`Merging Tailwind config from ~/${relative(this.options.srcDir, configPath)}`)
    // Transform purge option from Array to object with { content }
    if (Array.isArray(tailwindConfig.purge)) {
-      tailwindConfig.purge = { content: tailwindConfig.purge }
+      tailwindConfig.content = tailwindConfig.purge


Please check this part especially for mistakes on my end! The tests run fine, tough.

This looks good on my end! 🎊

I think this whole clause of transforming the purge option from Array to object is no longer required, the users should change this in their tailwind config according to the tailwind guide.

sasial-dev

A quick comment:

sasial-dev · 2021-12-10T03:01:00Z

src/index.ts

-    if (tailwindConfig.mode === 'jit') {
-      logger.info('Tailwind JIT activated')
+    if (options.mode === 'jit') {
+      logger.warn('`tailwindcss.mode: \'jit\'` option is unnecessary as it\'s now the default')


Would you want to warn for using the "mode" anyway?
As iirc there's no other modes now.

If I understand you correctly in that you propose for it to show a warning whenever a mode is set, that would mean any upcoming mode - if there will be any - will throw a warning unless accounted for again in this repo's code. I'd stay at warning only for the default mode.

sasial-dev · 2021-12-11T11:13:13Z

FYI @dargmuesli, a rebase is required for tailwind 3.0.1 from nuxt-community:renovate/tailwindcss-3.x.
You'll be able to rebase it from the branch, as nuxt-community:renovate/tailwindcss-3.x has already been pushed by @renovate-bot.

dargmuesli · 2021-12-11T11:48:53Z

I've updated the PR to v3.0.1 and changed the base branch, I mistakenly set to the renovate branch, to main.

RKAN · 2021-12-13T11:55:16Z

Any updates here? Can i use this already?

mklueh · 2021-12-14T17:12:12Z

Let's go go go

dargmuesli · 2021-12-15T01:52:02Z

Please react with a 👍 or ❤️ to the original PR comment instead of adding more encouraging comments, which trigger notifications for everyone.

hoektoe · 2021-12-28T04:53:08Z

Can we deploy this for a good start to new year.

davidurco · 2021-12-28T13:19:11Z

Let's goooo!

mklueh · 2021-12-28T15:01:11Z

@dargmuesli could you please clarify what is blocking you from merging this pull request? Is something still missing?

dargmuesli · 2021-12-28T15:07:37Z

what is blocking you from merging this pull request?

My permissions for this repository.

christopher4lis · 2021-12-29T02:24:19Z

Anyone looking to upgrade without having to wait should check out Tailwind's integration docs for Nuxt: https://tailwindcss.com/docs/guides/nuxtjs

Reduces a dependency and works absolutely perfectly.

ctwhome · 2021-12-29T12:33:35Z

this kind of passiveness IMO is killing the nuxt module ecosystem. In any case my patience 😓

davidurco · 2021-12-29T13:16:52Z

Anyone looking to upgrade without having to wait should check out Tailwind's integration docs for Nuxt: https://tailwindcss.com/docs/guides/nuxtjs

Reduces a dependency and works absolutely perfectly.

Why would I use this tailwindcss-module then?

gomorizsolt · 2021-12-29T16:57:49Z

Anyone looking to upgrade without having to wait should check out Tailwind's integration docs for Nuxt: https://tailwindcss.com/docs/guides/nuxtjs
Reduces a dependency and works absolutely perfectly.

Why would I use this tailwindcss-module then?

I'm not sure either - it's literally just a matter of minutes to install & configure Tailwind CSS with Nuxt.js.

ctwhome · 2021-12-29T21:35:50Z

Well, it is more convinient to use the module because literally it is just adding one word to the nuxt-config build modules. It also brings the style guide for example, and in principle it could be customized as much as they wanted. The big problem on the contrary is the maintenance and the dependencies. When it works, it is very good, but when it doesn't, or gets dated it stays in the middle creating more problems than solving. I wish the nuxt modules, somehow, would implement an interface that supplements the official things, in this case tailwindcss, rather than wrapping it, so the updates could be much easier

…

On Wed, Dec 29, 2021, 17:58 Zsolt Gomori ***@***.***> wrote: Anyone looking to upgrade without having to wait should check out Tailwind's integration docs for Nuxt: https://tailwindcss.com/docs/guides/nuxtjs Reduces a dependency and works absolutely perfectly. Why would I use this tailwindcss-module then? I'm not sure either - it's literally just a matter of minutes to install & configure Tailwind CSS with Nuxt.js. — Reply to this email directly, view it on GitHub <#407 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABAAJXRFMLFR53GVPSL5TZ3UTM4ZTANCNFSM5JX2QIZA> . You are receiving this because you commented.Message ID: ***@***.***>

ctwhome · 2021-12-30T11:15:16Z

I have the integration with the raw tailwindcss and nuxt 3 here https://github.com/ctwhome/top-nuxt3

eliyas5044 · 2022-01-10T15:51:45Z

Temporary solution
Forked and merged this PR and created a separate package.
@eliyas5044/tailwindcss

7ochem

Tested this PR in a project and it works great! Anyone who can get this PR forward? @Atinux maybe? 🙏🏻

aviramaz · 2022-01-21T02:22:39Z

@Atinux @pi0 will be extremely thankful for this PR to be published 🙏🏻

KaduMoura · 2022-02-03T01:25:34Z

Hi @btkostner @sasial-dev @medairbit @7ochem @Atinux @pi0 ,

could you PLEASE merge this PR? this would help greatly all of us..

thanks!

doostinharrell · 2022-02-04T21:39:56Z

Temporary solution Forked and merged this PR and created a separate package. @eliyas5044/tailwindcss

Thanks @eliyas5044! Your NPM module worked for me. Hopefully full v3 support rolls out soon.

pi0 · 2022-02-07T18:55:50Z

Thank you @dargmuesli for your efforts on this PR 💚 Sorry it took long we had to wait for proper Nuxt3 module tooling. Will throw an alpha release in few hours.

pi0 · 2022-02-08T00:06:34Z

Alpha version released as 5.0.0-0. Release notes: https://github.com/nuxt-community/tailwindcss-module/releases/tag/v5.0.0-0

renovate-bot and others added 2 commits December 9, 2021 17:50

chore(deps): update dependency tailwindcss to v3

bb7709b

feat(tailwind): migrate to v3

a200e8c

dargmuesli mentioned this pull request Dec 10, 2021

Upgrade to Tailwind CSS v3.0 #406

Closed

dargmuesli commented Dec 10, 2021

View reviewed changes

sasial-dev reviewed Dec 10, 2021

View reviewed changes

renovate bot force-pushed the renovate/tailwindcss-3.x branch from bb7709b to cd9de71 Compare December 11, 2021 02:16

chore(deps): update dependency tailwindcss to v3

feda6c6

dargmuesli changed the base branch from renovate/tailwindcss-3.x to main December 11, 2021 11:47

mklueh mentioned this pull request Dec 18, 2021

TypeError: Cannot read properties of undefined (reading '700') tailwindlabs/tailwindcss#6398

Closed

tobiasdiez mentioned this pull request Jan 9, 2022

Nuxt-Bridge ' [worker] Invalid or unexpected token ' #390

Closed

7ochem approved these changes Jan 17, 2022

View reviewed changes

pi0 approved these changes Feb 7, 2022

View reviewed changes

pi0 changed the title ~~feat(tailwind): migrate to v3~~ feat: migrate to tailwind v3 Feb 7, 2022

pi0 merged commit eacaa5e into nuxt-modules:main Feb 7, 2022

dargmuesli deleted the renovate/tailwindcss-3.x branch February 8, 2022 01:54

		@@ -77,26 +77,6 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie

		</d-alert>


		## Tailwind Just-In-Time

feat: migrate to tailwind v3 #407

feat: migrate to tailwind v3 #407

Conversation

dargmuesli commented Dec 10, 2021

dargmuesli left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sasial-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sasial-dev commented Dec 11, 2021

dargmuesli commented Dec 11, 2021

RKAN commented Dec 13, 2021 • edited

mklueh commented Dec 14, 2021

dargmuesli commented Dec 15, 2021

hoektoe commented Dec 28, 2021

davidurco commented Dec 28, 2021

mklueh commented Dec 28, 2021

dargmuesli commented Dec 28, 2021

christopher4lis commented Dec 29, 2021

ctwhome commented Dec 29, 2021

davidurco commented Dec 29, 2021

gomorizsolt commented Dec 29, 2021 • edited

ctwhome commented Dec 29, 2021 via email

ctwhome commented Dec 30, 2021

eliyas5044 commented Jan 10, 2022

7ochem left a comment

Choose a reason for hiding this comment

aviramaz commented Jan 21, 2022

KaduMoura commented Feb 3, 2022 • edited

doostinharrell commented Feb 4, 2022

pi0 commented Feb 7, 2022

pi0 commented Feb 8, 2022 • edited

RKAN commented Dec 13, 2021 •

edited

gomorizsolt commented Dec 29, 2021 •

edited

KaduMoura commented Feb 3, 2022 •

edited

pi0 commented Feb 8, 2022 •

edited