Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Ведущий экономист + ... пиктограмма - Как-то Так THIS     Экономическая грамотность и web-решения
Всё по теме: что, как и почему. Актуальные вещи - своими словами.
Повышайте своё качество WITH ME - СПЭМ !
Если тебе не нравится то, что ты получаешь, измени то, что ты даешь. © Карлос Кастанеда     KAKTOTAK.BY - услуги по экономическому проектированию и web-разработке (php/js - telegram, WordPress, Laravel, Vue, SEO)    Кооперация - на постоянной основе    Будь в теме   -    ПОДПИШИСЬ      Мои заметки - ЭКОНОМИКА +  и  Справочник WEB-разработчика | php+js+seo   в Telegram   telegram  

Кастомизация на Tailwind CSS: Простой совет по стилизации элементов

Кастомизация на Tailwind CSS: Простой совет по стилизации элементов

Порой сложно сразу перейти на стилизацию своего проекта с использованием Tailwind CSS, когда до этого ты всё время стилизовал элементы страницы с помощью стандартного CSS.

В Tailwind CSS, начиная с версии 2.1, можно использовать классы с динамическими значениями, например, с помощью конструкции []. Это позволяет задавать цвета, фоны и размеры с использованием произвольных значений прямо в классе. Это особенно полезно, когда вы хотите использовать кастомные цвета без необходимости изменять конфигурацию Tailwind.

Кастомизация на Tailwind CSS

Например, чтобы стилизовать такой элемент на странице, необходимо по стандартам Tailwind CSS добавить в тег следующие классы:


  <p class="text-red-500 bg-gray-200 p-3 rounded-md">
    Условия для кадровика:
  </p>

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


  <p class="text-[red] bg-[#E5E7EB] p-[12px] rounded-[0.375rem]">
    Условия для кадровика:
  </p>

Пояснение:

  • Цвет текста:
    text-[red]: Здесь мы используем квадратные скобки, чтобы указать произвольный цвет текста. Можем использовать как стандартное имя цвета CSS, так и HEX, RGB или HSL.
  • Фоновый цвет:
    bg-[#E5E7EB]: Это HEX-код для светлого серого цвета, который соответствует bg-gray-200.
  • Отступы (padding):
    p-[12px]: Вы используете произвольное значение для задания отступов. В данном случае 12px соответствует p-3.
  • Радиус границ:
    rounded-[0.375rem]: Задает радиус закругления границ, который соответствует классу rounded-md (который равен 6px или 0.375rem).

Использование Tailwind CSS с возможностью задания произвольных значений является не только удобным, но и современным подходом к веб-разработке. Этот метод позволяет разработчикам быстрее и гибче настраивать стили своих проектов, не ограничиваясь стандартными цветами и размерами.

автор - Михаленко Р.
M R. Автор - kaktotak.by Специализация: финансово-экономическое проектирование - моделирование бизнеса, инвестиционных проектов реального сектора, анализ и оценка эффективности, оптимизация системы управленческих решений.

Широкий спектр web-компетенций для решения задач бизнеса.

Подписывайтесь на мой телеграмм канал - Мои заметки - ЭКОНОМИКА +
Там я ничего не втюхиваю и не навязываю. Просто делюсь полезной информацией по экономической грамотности. Повышайте своё качество вместе со мной: что, как и почему в экономике на простом языке. Понятия, алгоритмы, процессы, микро- и макроаспекты и многое другое. Может, будет интересно !

А так же - Справочник WEB-разработчика | php+js+seo
Заметки и нативные решения простых локальных задач на PHP, JS. Кое-что про Laravel, WordPress, Vue и SEO.

  Персональная помощь в экономическом проектировании и веб-разработке:

  • Финансово-экономическое моделирование, анализ, учёт, бизнес-планирование
  • Комплексная web-разработка/поддержка проекта в сети (php/js, seo – Laravel, WordPress, Vue, telegram, администрирование, контент, реклама в Яндекс Директ

  telegram или форма обратной связи

Administrator
113
0
Имя
E-mail
Рейтинг
Отзыв

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
Хочу Всё Знать. Полезные Советы