Types for Tailwind-CSS config

How to use Typescript types for Tailwind-CSS

Using Typescript for Tailwind-CSS config

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: [],
}

And with these small changes, you now have first-class type support for your Tailwind-CSS configuration.

Suggestions

Categories