tailwind.config.ts (TypeScript) not working

[emilmuller]

What version of Tailwind CSS are you using?

3.3.0

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

webpack 5.76.3, postcss 8.4.21,

What version of Node.js are you using?

v16.14.0

What browser are you using?

N/A

What operating system are you using?

Windows

Reproduction URL

N/A

Describe your issue

I changed my tailwind.config.js to tailwind.config.ts, after which Tailwind ceased to emit css for classes that I used. Only the base css (reset) was emitted. Changing back to tailwind.config.js made it compile correctly again. There were no error messages.

Here is my js config file (which works correctly):

tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{html,ts,tsx}"],
  darkMode: 'class',
  theme: {
    fontSize: {
      '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '1.75rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
    typography: require('./typography'),
    extend: {
      boxShadow: {
        glow: '0 0 4px rgb(0 0 0 / 0.1)',
      },
      maxWidth: {
        lg: '33rem',
        '2xl': '40rem',
        '3xl': '50rem',
        '5xl': '66rem',
      },
      opacity: {
        1: '0.01',
        2.5: '0.025',
        7.5: '0.075',
        15: '0.15',
      },
      colors: require('./colors')
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ]
}

And here is my tailwind.config.ts which, when used, only emitts the reset css, and no error messages:

import type { Config } from 'tailwindcss'

export default {
  content: ["./src/**/*.{html,ts,tsx}"],
  darkMode: 'class',
  theme: {
    fontSize: {
      '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '1.75rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
    typography: require('./typography'),
    extend: {
      boxShadow: {
        glow: '0 0 4px rgb(0 0 0 / 0.1)',
      },
      maxWidth: {
        lg: '33rem',
        '2xl': '40rem',
        '3xl': '50rem',
        '5xl': '66rem',
      },
      opacity: {
        1: '0.01',
        2.5: '0.025',
        7.5: '0.075',
        15: '0.15',
      },
      colors: require('./colors')
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')
  ],
} satisfies Config

Let me know if more info is needed.

Kind regards, Emil

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Can you create a minimal reproduction repo that we can clone and play with instead?

Just using this config works fine when I try to reproduce it so it is very likely something else, but it's hard to debug what that something else is.

In the meantime:

• Make sure that you are on the latest version: npm install tailwindcss@latest
• Make sure that you re-start your dev server / re-build your css

[emilmuller]

Hi!

Here is a repo: https://github.com/emilmuller/testtailwind

Check index.html. The html and body tags contains classes that don't get emitted. Also, index.tsx adds the font-bold class to a p. It also wont get emitted. Converting the tailwind config to its js equivalent makes it work.

Run npm start and check the build folder's css file.

Regards, Emil

[kevinmu17]

i'd like to add on top of this issue that i'm getting TypeScript errors to:

TS1005: ';' expected.
TS2304: Cannot find name 'satisfies'.
TS2693: 'Config' only refers to a type, but is being used as a value here.

The steps i took:

1. npm install -D tailwindcss@latest
2. npx tailwindcss init --ts

[RobinMalfait]

@kevinmu17 this is a different issue. The issue here is that you are on an older version of TypeScript that doesn't have the satisfies keyword yet. You have 2 options:

1. Update your TypeScript dependency to the latest version
2. Remove the satisfies Config part

[waltervanwoudenberg]

@RobinMalfait I have the same issue as @kevinmu17 and i am using "typescript": "4.9.5"

[RobinMalfait]

Either @kevinmu17 or @waltervanwoudenberg can you create a minimal reproduction repo that shows this problem and open a new issue for that? Thanks!

[kevinmu17]

My problems are solved by installing typescript 5.0.2 ;)

[RobinMalfait]

This should be fixed by #10898, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.