Tailwind, missing values in Wave ?

Solved
gregoiregaonach

February 23, 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?

1
Select One:
bobbyiliev

February 23, 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

Select One:
gregoiregaonach

February 23, 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 ♥

Select One:
bobbyiliev

February 23, 09:27 AM

Hi there,

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

Regards, Bobby

1
Select One:
Write
Preview
Help

Markdown Basics

DevDojo uses Markdown syntax for writing posts, commments, and other content throughout the site. Below you will find some commonly used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet

Bold & Italic

Italics *asterisks*

Bold **double asterisks**

Code

Inline Code `backtick`

Code Block

```
Three back ticks and then enter your code blocks here.
```

Headers

# This is Heading 1
## This is Heading 2
### This is Heading 3
#### This is Heading 4
##### This is Heading 5

Here is an example of how each heading will looks

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5

Quotes

> type a greater than sign and start typing your quote.

Links

You can add links by typing the alt text inside of [] and the link inside of (), like so:

[links](https://devdojo.com)

Images

You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the link inside of (), like so:

![alt text for image](https://cdn.devdojo.com/images/image.png)

Embedding Codepens

You can also embed a codepen pen by writing the following:

{% codepen https://codepen.io/your/pen/url %}

You may also choose the default tabs you wish to show your pen by writing the default-tab like so: (default is result)

{% codepen https://codepen.io/your/pen/url default-tab=result,html %}

Embedding YouTube Videos

You can also embed a YouTube video by writing the following:

{% youtube VIDEO_ID_HERE %}

Embedding Katacoda Terminal

You can also embed a Katacoda Terminal by writing the following:

{% katacoda %}

You may also choose if the terminal should float at the bottom of the page or be embeded in the post itself by writing float like so:

{% katacoda float %}

Embedding Asciinema

You can also embed an Asciinema video by writing the following:

{% asciinema YOUR_VIDEO_ID %}

You may also choose if the video should be added as an alternate rel tag, so it could later on be played with the `asciinema play https://devdojo/post-name` command, with the rel argument like so:

{% asciinema YOUR_VIDEO_ID rel %}

That's about it. It's time to start crafting your story.

Please login, or signup to write a response.

​
Back to DevDojo