Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Leading Economist + ... пиктограмма - Как-то Так THIS     Economic literacy and web solutions
All on the topic: what, how and why. Actual things - in their own words.
Turn your quality WITH ME - BUTW !
If you don't like what you get, change what you give. © Carlos Castaneda     KAKTOTAK.BY - economic design and web development services (php/js - telegram, WordPress, Laravel, Vue, SEO)    Cooperation - on an ongoing basis    Be in the topic   -    SUBSCRIBE      My notes are ECONOMICS +  и  WEB Developer's Guide | php+js+seo   в Telegram   telegram  

Customization with Tailwind CSS: A simple tip for styling elements

Customization with Tailwind CSS: A simple tip for styling elements

Sometimes it's difficult to immediately switch to styling your project using Tailwind CSS, when before that you were always styling page elements using standard CSS.

In Tailwind CSS, starting from version 2.1, you can use classes with dynamic values, for example, using the [] construct. This allows you to set colors, backgrounds, and sizes using arbitrary values right in the classroom. This is especially useful when you want to use custom colors without having to change the Tailwind configuration.

Customization to Tailwind CSS

For example, to style such an element on a page, you must add the following classes to the tag according to Tailwind CSS standards:


  <p class="text-red-500 bg-gray-200 p-3 rounded-md">
    Conditions for the HR officer:

But the disadvantage of this approach, as for me, is that in this case it is necessary to choose colors and sizes from the existing Tailwind line. It is much more convenient to use the following construction, which makes it easy to customize native classes in Tailwind if necessary.


  <p class="text-[red] bg-[#E5E7EB] p-[12px] rounded-[0.375rem]">
    Conditions for the HR officer:

Explanation:

  • Text color:
    text-[red]: Here we use square brackets to indicate an arbitrary text color. We can use either the standard CSS color name, or HEX, RGB, or HSL.
  • Background color:
    bg-[#E5E7EB]: This is the HEX code for the light gray color, which corresponds to bg-gray-200.
  • Padding:
    p-[12px]: You are using an arbitrary value to set the margins. In this case, 12px corresponds to p-3.
  • Border radius:
    rounded-[0.375rem]: Sets the border radius corresponding to the rounded-md class (which is 6px or 0.375rem).

Using Tailwind CSS with the ability to set arbitrary values is not only convenient, but also a modern approach to web development. This method allows developers to customize the styles of their projects faster and more flexibly, not limited to standard colors and sizes.

автор - Михаленко Р.
M R. Автор - kaktotak.by Specialization: financial and economic design - modeling of business, investment projects of the real sector, analysis and evaluation of efficiency, optimization of the management decision system.

A wide range of web-based competencies for solving business problems.

Subscribe to my telegram channel - My notes are ECONOMICS +
Там я ничего не втюхиваю и не навязываю. Просто делюсь полезной информацией по экономической грамотности. Повышайте своё качество вместе со мной: что, как и почему в экономике на простом языке. Понятия, алгоритмы, процессы, микро- и макроаспекты и многое другое. Может, будет интересно !

And also - WEB Developer's Guide | php+js+seo
Notes and native solutions to simple local tasks in PHP, JS. Something about Laravel, WordPress, Vue and SEO.

  Personal assistance in economic design and web development:

  • Financial and economic modeling, analysis, accounting, business planning
  • Comprehensive web development/project support on the web (php/js, seo – Laravel, WordPress, Vue, telegram, administration, content, advertising in Yandex Direct

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

Administrator
34
0
Name
E-mail
Rating
Review

Currency Converter
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT- what is it about
ECONOMIC LITERACY
  Simple online solutions to problems of economics and finance  
I Want To Know Everything. Useful Tips