Next.js Discord

Discord Forum

Type error in tailwind.config.js

Answered
Laysan Albatross posted this in #help-forum
Open in Discord
Avatar
Laysan AlbatrossOP
when including @catppuccin/tailwind to my tailwind config, I get a typing error, and have no idea how I can fix this. 

// @ts-check
/** @type {import("tailwindcss/types").Config } */
module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,tsx}', '.css/**/*.css'],
  theme: {},
  safelist: [
    // this is for demonstration purposes only, not required for basic usage
    {
      pattern: /bg-.+/,
    },
  ],
  plugins: [
    require('@tailwindcss/forms'),
    require('@catppuccin/tailwindcss')({
      prefix: 'one',
      defaultFlavour: 'mocha',
    }),
  ],
}
Image
Answered by joulev
detailed explanation and fix is posted in the [original issue](https://github.com/catppuccin/tailwindcss/issues/18).

tl;dr: this is a library bug. you can workaround by using tailwind.config.ts instead where you can use esm syntax (i wouldn't even consider this a workaround, .config.ts >> .config.js)
View full answer

3 Replies

Avatar
Laysan AlbatrossOP
It works when including // @ts-nocheck to the config, but thats no fix, thats just ignoring the error ^^
Avatar
joulev
detailed explanation and fix is posted in the [original issue](https://github.com/catppuccin/tailwindcss/issues/18).

tl;dr: this is a library bug. you can workaround by using tailwind.config.ts instead where you can use esm syntax (i wouldn't even consider this a workaround, .config.ts >> .config.js)
Answer
Avatar
Laysan AlbatrossOP
yess, works tysm 🙂