Tailwind, missing values in Wave ?

Solved
gregoire

Feb 23rd, 2021 05:36 AM

Hi everyone,

Just a quick question : the Tailwind generated app.css only have those values for width :

.w-0{
  width: 0;
}
.w-1{
  width: 0.25rem;
}
.w-2{
  width: 0.5rem;
}
.w-3{
  width: 0.75rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-8{
  width: 2rem;
}
.w-10{
  width: 2.5rem;
}
.w-12{
  width: 3rem;
}
.w-16{
  width: 4rem;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-32{
  width: 8rem;
}
.w-40{
  width: 10rem;
}
.w-48{
  width: 12rem;
}
.w-56{
  width: 14rem;
}
.w-64{
  width: 16rem;
}
.w-96{
  width: 24rem;
}
.w-104{
  width: 26rem;
}
.w-128{
  width: 32rem;
}
.w-auto{
  width: auto;
}

A lot of default values are missing like w-0.5, w-1.5, w-2.5, w-3.5, w-7, w-9, w-11, w-14, w-28, w-36, w-44, w-52, w-60, w-72, w-80, etc.

My install is a fresh one.

Do you have any idea why?

Report
1
bobbyiliev

Feb 23rd, 2021 05:41 AM

Best Answer

Hi there,

I believe that Wave uses TailwindCSS 1.x at the moment, you can find the classes for TaiwindCSS 1.x here:

https://v1.tailwindcss.com/docs/width

The new classes that you've mentioned are available for TailwindCSS 2.x.

The Wave TailwindCSS theme will be upgraded to TailwindCSS 2.x soon! Actually Wave 2.0 is also comming soon 🙌.

Hope that this helps! Regards, Bobby

gregoire

Feb 23rd, 2021 05:44 AM

Oh thanks for very mush for your answer!

A simple npm install tailwindcss@latest postcss@latest autoprefixer@latest fixed everything in my theme ♥

bobbyiliev

Feb 23rd, 2021 09:27 AM

Hi there,

No problem at all! Happy to hear that you've got it all working!

Regards, Bobby

Report
1