How to use Typescript types in tailwind.config.js

Using Typescript for Tailwind-CSS config

Update: Tailwind 3.3+ can use TypeScript directly

This blog post just got outdated by the release 3.3. Now Tailwind-CSS supports the usage of a config file as TypeScript file. Tailwind-CSS uses its own preprocessor, so it doesn't inter with your existing TypeScript setup.

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

typescriptLanguageCheck out all coding posts

You can find the release notes at this link.

Original article

Tailwind ships with types for its configuration-file. To use them, all you have to do are the following two simple steps.

Update to Tailwind-CSS 3.1 or higher

The first requirement is to update your Tailwind-CSS dependency to version that’s at least 3.1, since that’s the version that started shipping with types.

Update your config-file

The second and last step is to add a single special comment, called “type annotation”, to your exported configuration. A great feature of Typescript is that it can be even used in Javascript-files. As long as a module containing the types can be referenced, your IDE can use this metadata for autocompletion of type checking.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // The source of your files, e.g. "./src/**/*.{html,js,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}