Как использовать типы Typescript в tailwind.config.js

Использование Typescript для конфигурации Tailwind-CSS

Обновление: Tailwind 3.3+ может напрямую использовать TypeScript

Этот пост в блоге только что устарел в выпуске 3.3. Теперь Tailwind-CSS поддерживает использование файла конфигурации в качестве файла TypeScript. Tailwind-CSS использует собственный препроцессор, поэтому он не взаимодействует с вашей существующей настройкой TypeScript.

import type { Config } from 'tailwindcss'

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

typescriptLanguageCheck out all coding posts

Вы можете найти примечания к выпуску по этой ссылке.

Оригинальная статья

Tailwind поставляется с типами для своего конфигурационного файла. Чтобы использовать их, все, что вам нужно сделать, это следующие два простых шага.

Обновление до Tailwind-CSS 3.1 или выше

Первое требование — обновить зависимость Tailwind-CSS до версии не ниже 3.1, поскольку именно эта версия начала поставляться с типами.

Обновите файл конфигурации

Второй и последний шаг — добавить один специальный комментарий, называемый «аннотацией типа», к экспортируемой конфигурации. Отличительной особенностью Typescript является то, что его можно использовать даже в Javascript-файлах. Пока можно ссылаться на модуль, содержащий типы, ваша IDE может использовать эти метаданные для автозаполнения проверки типов.

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