Однако в этой статье будут подробно рассмотрены два конкретных класса: пропорциональные цифры и табличные цифры. Они используются для оформления числовых значений в Tailwind, а также для упорядочения и представления числовых данных таким образом, чтобы они соответствовали дизайну документа.
В этой статье будут подробно рассмотрены пропорциональные и табличные фигуры в CSS Tailwind, используя следующую схему:
- Как использовать пропорциональные фигуры в CSS Tailwind?
- Как использовать табличные цифры в CSS Tailwind?
- Разница между пропорциональными и табличными цифрами
Как использовать пропорциональные фигуры в CSS Tailwind?
Класс пропорциональных фигур назначит элементу соглашение, согласно которому каждое число не имеет одинаковой ширины.
Синтаксис
Синтаксис использования пропорциональных фигур в Tailwind следующий:
< div сорт '=' 'пропорциональные числа' >
< div / >
В приведенном выше синтаксисе « пропорциональные числа ” класс должен быть предоставлен элементу для использования пропорциональных фигур.
Давайте посмотрим практический пример пропорциональных фигур.
В приведенном ниже коде два « п ” элементы содержатся в “ div ” элемент, использующий класс пропорциональных фигур:
< div сорт '=' 'пропорциональные числа text-center bg-slate-200 text-xl' >< п > 121212 < / п >
< п > 838383 < / п >
< / div >
Объяснение приведенного выше кода следующее:
- « div ” элемент использует “ пропорциональные числа », который будет применять к числам свойство пропорциональной фигуры.
- « текстовый центр Класс позиционирует текст в центре элемента.
- « bg-{цвет}-{число} Класс ” отвечает за цвет фона элемента.
- « текст-xl Класс ” обеспечивает очень большой размер шрифта для текста.
- Дальше два» п создаются элементы, содержащие разные числа.
Выход
В выводе видно, что числа во втором « п ” имеют немного большую ширину, чем первый. Это связано с классом пропорциональных фигур:
Как использовать табличные цифры в CSS Tailwind?
Табличные цифры в Tailwind присваивают элементу соглашение, в котором каждое число имеет одинаковый размер ширины. Это создает симметричное табличное представление чисел.
Синтаксис
Синтаксис использования табличных цифр следующий:
< div сорт '=' 'табличные числа' >< div / >
В приведенном выше синтаксисе « табличные числа Класс ” предоставляется элементу для использования табличных цифр.
Давайте посмотрим, как « табличные числа » влияют на числовые значения в HTML-документе. Для этой демонстрации два « п с числовыми значениями создаются и содержатся в файле « div ” элемент, использующий класс табличных фигур:
< div сорт '=' ' tabular-nums text-center bg-slate-200 text-xl' >< п > 121212 < / п >
< п > 838383 < / п >
< / div >
В приведенном выше коде « табличные числа ” класс предоставляется “ div ” элемент, который будет присваивать дочернему элементу стиль табличных цифр “ п » элементы.
Выход:
Из приведенного выше вывода видно, что числовые значения в обоих элементах идеально выровнены из-за одинаковой ширины цифр.
Дополнительная информация: разница между пропорциональными и табличными цифрами в CSS Tailwind
Давайте рассмотрим демонстрацию, которая различает влияние классов табличных и пропорциональных фигур на числовые значения. В этой демонстрации элементам по умолчанию будет присвоен класс пропорциональных фигур. Далее при наведении курсора элементам будет присвоен класс табличных фигур:
< div сорт '=' ' пропорциональные числа text-center bg-slate-200 text-xl hover: tabular-nums' >< п > 121212 < / п >
< п > 838383 < / п >
< / div >
В приведенном выше коде видно, что « div элемент снабжается элементом « пропорциональные числа », что будет соглашением по умолчанию, которому будут следовать числовые значения.
Аналогично, из-за « при наведении: табличные числа », числовые значения будут следовать соглашению о табличных цифрах всякий раз, когда пользователь наводит курсор мыши на элемент «div».
Выход
В данном выводе ширина числовых значений изменяется, когда пользователь наводит указатель мыши на элемент. Это обеспечивает визуальную разницу между пропорциональными и табличными цифрами в Tailwind:
Это все, что касается пропорциональных и табличных цифр в Tailwind.
Заключение
Чтобы использовать пропорциональные фигуры в Tailwind, пропорциональные числа используется класс ». В пропорциональных фигурах используется соглашение, согласно которому каждое числовое значение имеет разный размер ширины. Чтобы использовать табличные данные в Tailwind, табличные числа используется класс ». В табличных рисунках используется соглашение, согласно которому каждое числовое значение имеет одинаковый размер ширины. В этой статье описана процедура использования пропорциональных и табличных цифр в Tailwind.