v2 to v3 theme() keys bug?

[jheng-jie]

What version of Tailwind CSS are you using?

v3.0.1

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

vue cli v5.x webpack v5.x

What version of Node.js are you using?

v16.5.0

What browser are you using?

N/A

What operating system are you using?

macOS

Describe your issue

Develop or compile. This message always appears

 does not exist in your theme config. 'spacing' has the following keys: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60', '64', '72', '80', '96', 'px', '0.5', '1.5', '2.5', '3.5', '4.5', '7.5'

  17 | }
  18 | .dialog.iOS .title {
> 19 |   font-size: theme("spacing['4.5']");
     |   ^
  20 |   color: theme("colors.black");
  21 | }

But the following keys message contains the index

There is no such error message in v2

tailwind.config.js

module.exports = {
  theme: {
    spacing: {
      ["4.5"]: "1.125rem"
    },
  }
}

[minimit]

I think it's wrong to use array in object definition, try with this.

module.exports = {
  theme: {
    spacing: {
      "4.5": "1.125rem"
    },
  }
}

By the way why are you using space in font size? and if you want to not override default spacing values you need to extend the theme this way

  theme: {
    extend: {

[ardaerzin]

@jheng-jie was just here to create a ticket for the same problem. we experience this as well, and it is a blocker for migration.

@minimit it is not an array so it won't make a difference.

[adamwathan]

Hey! Can you please provide a reproduction?

[ardaerzin]

@adamwathan here is one

in the Test.module.css file if you enable the commented out lines, you'll start seeing the errors. this was working fine in tailwind v2. also the regular classnames still work as you can see in the index page

[jheng-jie]

@adamwathan

Sorry my project so big

But it can be easily reappear

# vite
yarn create vite test && cd test

# tailwindcss
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      spacing: {
        ["4.5"]: "0.125rem",
        ["4d5"]: "0.125rem",
      }
    },
  },
  plugins: [],
}

src/App.vue

<template>
  <div class="test">Test</div>
  <!-- is working -->
  <div class="p-4.5">Test</div>
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;

.test {
  /*
    working
  */
  padding: theme("spacing.4d5");

  /*
    has the following keys:
      '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '16', '20', '24',
      '28', '32', '36', '40', '44', '48', '52', '56', '60', '64', '72', '80', '96', 'px', '0.5',
      '1.5', '2.5', '3.5', '4.5', '4d5'
  */
  padding: theme("spacing['4.5']");

  /*
    'spacing[4.5]' does not exist in your theme config. 'spacing.4' is not an object.
  */
  padding: theme("spacing[4.5]");
}
</style>

The problem may occur in the "dot" naming

[ethylon]

I don't think it's related to the dot naming, looks like the [] don't work anymore.

Smallest repro possible: https://play.tailwindcss.com/SvPNpftcow?file=config
Switching to v2.2.19 makes it work, switching to v3.0.1 doesn't.

[Kiyozz]

I can confirm this. It happend with height[1.5] or a custom transitionProperty

[reinink]

Hey just an update here — we're working on a fix for the square bracket notation: #6519