extend not working

[Mostafa-Mohammadi]

hi,
i try to add some custome utility for my own projact , but it dosent work in tailwind config

theme: {
extend: {
spacing: {
65: "18rem",
66: "22rem",
67: "26rem",
},
},

[ClemHlrdt]

According to the documentation, you have to use quotes around the keys.

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

Link to the documentation

[octocat512]

@ClemHlrdt
I can't find any documentation regarding the quotes issue. Also, the answer is not reasonable.
The quoted key property and non-quoted key property are the same in javascript.
Except the key is reserved and also has special characters.
https://stackoverflow.com/questions/9192517/javascript-object-property-quotes
Tailwind CSS extends not working on Next.js.

[octocat512]

@kyle-hensoon the theme extends are not working on dev or prod?
Did you use the purge option to remove unused CSS?
I had set the incorrect purge option so the classes were purged unexpectedly.

[simonswiss]

Hi @kyle-hensoon 👋

Here's an example of the 65, 66 and 67 values added to the spacing scale: https://play.tailwindcss.com/BNOfhqERSC?file=config

As you can see, it's working properly.

May I ask you to try and reproduce an example of your problem in Tailwind Play when opening an issue reporting that something is not working? That will be useful to both verify this is an actual problem with Tailwind and help the community troubleshoot your problem 👍

[adamwathan]

Closing as no reproduction has been provided and we've demonstrated things working as expected. Feel free to open another issue that includes a reproduction if you are still having problems with this.

[mbj36]

If you have postcss.config file, try deleting that, and it should work

[deepakvishwakarma-hh]

module.exports = {
purge: ['./pages//*.js', './components//.js'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
spacing: {
"72": "18rem",
"80": "20rem",
"88": "22rem",
"96": "24rem",
"104": "26rem",
"112": "28rem",
"120": "30rem",
"124": "31rem",
"128": "32rem",
"132": "33rem",
"136": "34rem",
"140": "35rem",
"144": "36rem",
"fw": "1440px",
},
fontSize: {
'xxs': '.6rem',
'smaller': '.95rem'
},
fontFamily: {
'light': ['Eina Light'],
'semibold': ['Eina SemiBold'],
},
screens: {
'mobile': '600px',
'c_large': '1200px',
'desktop': '1440px'
},
width: {
'28': '7rem',
'c_large': '1200px',
"38": "10rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"68": "17rem",
"72": "18rem",
"80": "20rem",
"88": "22rem",
"96": "24rem",
"104": "26rem",
"112": "28rem",
"120": "30rem",
"124": "31rem",
"128": "32rem",
"132": "33rem",
"136": "34rem",
"140": "35rem",
"144": "36rem",
'flex-half': "calc((100%/2) - 15px)",
'flex-fourth': "calc((100% / 4) - 20px)"
},
inset: {
'flexiblemargin': "calc((100vw - 1420px) / 2)",
'100': '100px',
'200': '200px',
'250': '250px',
'300': '300px',
'400': '400px',
'20': '20px',
'22': '22px',
'24': '24px',
'26': '26px',
'28': '28px',
'30': '30px',
'35': '35px',
'40': '40px',
'45': '45px',
'45': '45px',
'46': '46px',
'47': '47px',
'48': '48px',
'49': '49px',
'50': '50px',
'51': '51px',
'52': '52px',
'53': '53px',
'54': '54px',
'55': '55px',
'60': '60px'
},
height: {
'hero': '500px',
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"68": "17rem",
"72": "18rem",
"80": "20rem",
"88": "22rem",
"96": "24rem",
"104": "26rem",
"112": "28rem",
"120": "30rem",
"124": "31rem",
"128": "32rem",
"132": "33rem",
"136": "34rem",
"140": "35rem",
"144": "36rem",
},
padding: {
".5": ".125rem"
},
maxWidth: {
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"68": "17rem",
"72": "18rem",
"80": "20rem",
"88": "22rem",
"96": "24rem",
"104": "26rem",
"112": "28rem",
"120": "30rem",
"124": "31rem",
"128": "32rem",
"132": "33rem",
"136": "34rem",
"140": "35rem",
"144": "36rem",
"fw": "1440px",
'c_large': '1200px'
},
maxHeight: {
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"68": "17rem",
"72": "18rem",
"80": "20rem",
"88": "22rem",
"96": "24rem",
"104": "26rem",
"112": "28rem",
"120": "30rem",
"124": "31rem",
"128": "32rem",
"132": "33rem",
"136": "34rem",
"140": "35rem",
"144": "36rem",
"fw": "1440px"
},
zIndex: {
'-2': '-2',
'-4': '-4',
'-6': '-6',
'-12': '-12',
},
backgroundColor: {
'primary': '#89bdf9',
'light': '#f5f5f5',
'light-200': '#f0f0f0',
'light-300': '#e8e8e8'
},
lineHeight: {
'large': '54px'
}
},
},
plugins: [
"tailwindcss",
[
"@fullhuman/postcss-purgecss",
process.env.NODE_ENV === "production"
? {
// the paths to all template files
content: [
"./pages/**/.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
],
// function used to extract class names from the templates
defaultExtractor: (content) =>
content.match(/[\w-/:]+(?<!:)/g) || [],
}
: false,
],
],
}

my custom utilities work fine in development ,but not in production.
i think ... minify css cause me

// versions
"tailwindcss": "^2.0.2",
"@fullhuman/postcss-purgecss": "^5.0.0",

[dskvr]

@adamwathan

If you have postcss.config file, try deleting that, and it should work

So introduce a regression? Are theme extensions not compatible with postcss?

[adamwathan]

@dskvr There's no regression here, everything works the way it's supposed to as far as I can tell. See my reproduction here:

#10419 (comment)

Let's continue the conversation in that thread if you can't figure out where the mistake is 👍

[EngelbertTeh]

I am also having this issue.

[luiscauro]

if your file are outside off de folder app, pls add new route example component to content into tailwind.config.js

module.exports = { content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}' ], theme: { extend: { colors: { background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', btn: { background: 'hsl(var(--btn-background))', 'background-hover': 'hsl(var(--btn-background-hover))', }, }, }, }, plugins: [], }