Значения вне шкалы

Иногда нужно значение, которого нет ни в шкале, ни в палитре: цвет из логотипа приюта, точный размер из макета дизайнера или процент. Для этого Tailwind позволяет написать любое значение CSS в квадратных скобках после названия класса. Такие значения называются произвольными значениями (arbitrary values):

Tailwind создаёт CSS для такого класса, когда находит его в ваших файлах, как и для любого другого. Внутри скобок не должно быть пробелов: пробел разделяет классы, поэтому w-[350 px] превратится в два несуществующих класса, и ничего не произойдёт.

Произвольные значения удобны, но используйте их только как исключение. Каждое из них — маленький шаг в сторону от шкалы и палитры, а когда их много, отступы и цвета сайта перестают сочетаться. Если вы ловите себя на том, что пишете p-[15px], то p-4 (16 пикселей) почти наверняка подойдёт не хуже. А цвет, который вы будете использовать на многих страницах, лучше добавить в тему Tailwind под собственным именем, как вы узнаете в уроке о настройке Tailwind.

Плакаты и листовки приюта напечатаны на кремовой бумаге, #fdf6ec , и страница Луны должна быть того же цвета. В палитре такого нет, поэтому для одной страницы произвольное значение — как раз то, что нужно.