Tipos para la configuración de Tailwind-CSS

Cómo usar tipos de mecanografiados para Tailwind-CSS

Usando Typescript para la configuración de Tailwind-CSS

Tailwind se envía con tipos para su archivo de configuración. Para usarlos, todo lo que tienes que hacer son los siguientes dos simples pasos.

Actualice a Tailwind-CSS 3.1 o superior

El primer requisito es actualizar su dependencia de Tailwind-CSS a una versión que sea al menos 3.1, ya que esa es la versión que comenzó a enviarse con tipos.

Actualice su archivo de configuración

El segundo y último paso es agregar un solo comentario especial, llamado "anotación de tipo", a su configuración exportada. Una gran característica de Typescript es que puede usarse incluso en archivos Javascript. Siempre que se pueda hacer referencia a un módulo que contenga los tipos, su IDE puede usar estos metadatos para completar automáticamente la verificación de tipos.

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

Y con estos pequeños cambios, ahora tiene soporte de tipo de primera clase para su configuración de Tailwind-CSS.