Псевдоним значения интервала в Tailwind CSS?
У меня есть некоторые значения интервалов, которые мне нравятся для псевдонимов, например, у меня есть компонент карты, и я хочу установить отступ с помощью класса, такого как p-Card, а затем в одном месте обновить значение отступа независимо от того, сколько раз используется класс p-Card.
В моем taiwind.config.css я мог бы установить значение:
module.exports = {
theme: {
extend: {
spacing: {
Card: '10px',
},
},
},
};
Это работает, но я хотел бы повторно использовать значения интервалов Tailwind по умолчанию, чтобы я мог легко увеличить или уменьшить значение и сохранить масштабы по умолчанию.
В настоящее время я делаю это, импортируя объект темы по умолчанию, но это кажется многословным. Есть ли более чистый способ?
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
theme: {
extend: {
spacing: {
Card: defaultTheme.spacing["8"],
},
},
},
};
Я также мог бы добавить пользовательский стиль утилиты:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.p-Card {
@apply p-8
}
}
Я не уверен, есть ли какая-либо функциональная разница в этих двух подходах?
Ответы 2
Я полагаю, единственная разница в том, что первый подход даст вам интеллект, если у вас есть расширение VS Code. Функционально они идентичны. Я не верю, что есть какой-то другой способ добиться этого.
В WebStorm у меня по умолчанию есть интенсивность для обоих
Так что здесь определенно есть разница между двумя вашими вариантами.
TLDR: в файле конфигурации Tailwind добавляет множество псевдонимов классов, используя шкалу Tailwind по умолчанию со значением 8, то есть 2rem.
Использование утилиты добавит только этот конкретный класс.
Вариант конфигурации
Когда вы используете файл tailwind.config.js для расширения темы с помощью defaultTheme.spacing["8"], вы фактически добавляете псевдоним Card к любому свойству, которое использует масштаб "8".
Сюда входят width, height, margin, padding, top, bottom, left, right и т. д.
Пример - https://play.tailwindcss.com/8YRgwjJWLy
По ссылке выше попробуйте добавить класс с помощью -Card, и пусть автозаполнение покажет вам все возможные сгенерированные классы. Затем посмотрите на вкладку Generated CSS > Utilties внизу, чтобы увидеть псевдонимы.
Естественно, эти классы будут включены в ваш проект только в том случае, если вы их используете. Таким образом, размер файла не должен быть проблемой, он просто открывает дверь для использования этих дополнительных псевдонимов.
Как и один добавленный комментарий, они отображаются в автозаполнении.
Вариант утилиты
Когда вы используете метод Utility, вы добавляете в проект только этот конкретный класс CSS. Он будет включен в вашу таблицу стилей только в том случае, если он существует в классе в отображаемом файле. Этот класс, скорее всего, не будет отображаться в автозаполнении, если только у вас нет плагина, поддерживающего это.
Пример - https://play.tailwindcss.com/9mPlroweW6
Попробуйте добавить класс с помощью p-Card и посмотрите на Generated CSS > Utilities, только padding: 2rem; шоу.
Если вы добавите класс с m-Card и посмотрите на Generated CSS > Utilities, он не отобразится.
Если вы удалите класс p-Card, вы увидите, что он удален из сгенерированного CSS.
Обе эти опции достаточны и функционально дадут вам псевдоним p-Card.
РЕДАКТИРОВАТЬ
Как отметил @Evanss, расширение padding вместо spacing в файле конфигурации также может быть допустимым решением.
Пример - https://play.tailwindcss.com/fzY2Cll38b
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
padding: {
Card: defaultTheme.spacing["8"],
},
},
}
}
Надеюсь, это поможет объяснить разницу. Спасибо!
Отличный ответ, хотя стоит отметить, что вы можете просто расширить отступы, а не все интервалы: extend: { padding: { Card: defaultTheme.spacing["8"], }, },
Это определенно стоит отметить, я отредактировал свой ответ, включив в него и этот бит. Спасибо!
Еще один подход для рассмотрения, больше связанный с идиомой служебного класса, как я это испытал: используйте
p-8в компоненте вашей карты. Это более «прозрачно» (вы можете отличить отступы, только взглянув на разметку компонента, нет необходимости обращаться к конфигурации Tailwind) и помогает снизить вес CSS по мере роста проектов (один.p-8 { padding: 2rem }в финальном CSS вместо.p-8, .p-Card, .p-Another, .p-More { padding: 2rem })