Tailwind CSS v3.4.1 Bug : w-18 is 18 px. Strange pixel

[YumaInaura]

What version of Tailwind CSS are you using?

v3.4.1

What build tool (or framework if it abstracts the build tool) are you using?

Nuxt 3.10.3

What version of Node.js are you using?

v20.11.1

What browser are you using?

Chrome

What operating system are you using?

macOS,

Reproduction URL

https://play.tailwindcss.com/Hru9KzeIsg

Describe your issue

w-18 has strange px
w-18 is wider than w-20

  <div class="m-1 w-14 bg-yellow-200">w-14</div>
  <div class="m-1 w-16 bg-yellow-200">w-16</div>
  <div class="m-1 w-18 bg-yellow-200">w-18</div>
  <div class="m-1 w-20 bg-yellow-200">w-20</div>

.w-16 {
    width: 4rem/* 64px */;
}

.w-18 {
    width: 18px;
}

.w-20 {
    width: 5rem/* 80px */;
}

[adamwathan]

Hey! The issue here is that w-18 is not a class in Tailwind by default, 18 is not part of the default spacing scale. Can see here no class is being generated:

So the element has a width of 100% by default since it's a block level element 👍

[YumaInaura]

@adamwathan thankx my project tailwind setting was it!

I'm sorry for the trouble.

tailwind.config.js

  theme: {
    extend: {
      spacing: {
        18: '18px',