Типы для конфигурации Tailwind-CSS
Как использовать типы Typescript для Tailwind-CSS
Использование 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
Вы можете найти примечания к выпуску по этой ссылке.
Оригинальная статья
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: [],
}
Благодаря этим небольшим изменениям у вас теперь есть первоклассная поддержка типов для вашей конфигурации Tailwind-CSS.
Действия
Feedback
Предлагаемые сообщения
Дополнение
Категории