CODEWITHSUNDEEP
widthcustomizationtailwind-css
Madriesen
Madriesen

Reputation: 619

Tailwindcss customize width with name

I want to add custom items in tailwindcss width. I found out that you have to use spacing. In the colors customisation you can use multiple objects with names. Is it possible to do this with spacing as well? When I try to do it, nothing happens in the browser...

spacing: {
        // the commented lines work as excepted
        // 'cta-slogan': '23.813rem',
        // 'services-item': '28.5rem',

        // these don't work..
        cta: { slogan: '23.813rem' },
        services: { item: '28.5rem' },
      },

Upvotes: 0

Views: 6296

Answers (2)

Stavros
Stavros

Reputation: 831

You can have custom naming in spacing!

All you need to do is add it in tailwind.config.js in the extend part

// tailwind.config.js
extend: {
  spacing: {
    'cta-slogan': '23.813rem'
  }
}

and use it accordingly based on TailwindCSS' naming convention.

/* for margin: */
.m-cta-slogan{
  margin: 23.813rem;
}

/* for width: */
.w-cta-slogan{
  width: 23.813rem;
}

// etc..

Also you can customize width separately. Just use the theme.width section of your tailwind.config.js file.

// tailwind.config.js
extend: {
 width: {
  'services-item': '14.2857143%'
 }
}

In this case you will get only the width relative classes like in the same naming convention .w-services-item

Both cases includes all responsive classes -like lg:w-services-item

Upvotes: 0

Digvijay
Digvijay

Reputation: 8947

As of now Tailwind isn't supporting Nested object syntax for spacing. Currently, you will have to stick with 'cta-slogan': '23.813rem'.

If in future upgrades this is supported, I will keep you posted via this thread. Cheers!

Upvotes: 2

Related Questions