Using Tailwind resolveConfig with Typescript with Proper Types

262 Views Asked by At

I am trying to use resolveConfig in my code. I have a turbo repo and this is the structure of my tailwind config directory:

packages/configs/
├── package.json
├── tailwind
│   ├── postcss.config.js
│   ├── tailwind.config.d.ts
│   └── tailwind.config.js
└── tsconfig.json

tailwind.config.js is a very standard tailwind config file

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',

    //For monorepo to wok
    './**/*.{js,ts,jsx,tsx,mdx}',
    '../../packages/components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primaryBackground: { light: '#ffffff' },
        secondaryBackground: { light: '#d9d9d9' },
        accent: { light: '#fe65fb' },
        primaryText: { light: '#000000' },
        secondaryText: { light: '#ffffff' },
      },
    },
  },
  plugins: [],
}

I have tried adding a tailwind.config.d.ts file thinking it will resolve the type issues but it doesn't look like it did.

declare module './tailwind.config'

When I import the config in my file I get type errors:

import resolveConfig from 'tailwindcss/resolveConfig'
import { theme } from '@[company_name]/configs/tailwind/tailwind.config'

the error is

File '[working directory]/packages/configs/tailwind/tailwind.config.d.ts' is not a module.

if I remove the d.ts file it still gives some other type error. How can I fix this?

0

There are 0 best solutions below