Tailwind CSS как кодировать пиксельный идеальный дизайн
Только начал использовать https://tailwindcss.com
И не могу понять, как кодировать идеальный дизайн пикселей только с классами попутного ветра. Простой пример: мне нужно padding-left 22px, но ближайший класс попутного ветра — pl-6 и pl-8, что составляет 24px и 32px соответственно. Итак, в конце концов, у меня есть куча классов попутного ветра + 1 пользовательский, где я делаю приготовления, что противоречит цели этой структуры «сначала утилиты».
Я не согласен с вами, или, может быть, я бы сказал: «Вы никогда не получите идеальные до пикселя проекты из фреймворка, у которого нет никаких возможностей настройки» :) Что касается этого фреймворка, я думаю, что это можно сделать внутри tailwind.config. .js, чтобы вы могли указать любой размер, который хотите.
Конечно, вы всегда можете взломать фреймворк, но это предполагает, что ваш дизайнер всегда использует одинаковую ширину столбцов, стандартизированные размеры шрифта, отступы и т. д., и т. д., и т. д. Реальность такова, что совершенство пикселей стоит очень дорого, а согласованность фреймворка, скорее всего, противоречит дизайнерским замыслам. размещение "кишка".
Рад, что вы поняли, как решить это здесь!
На самом деле вы не должны хотеть иметь «пиксельно-идеальный» дизайн, то есть полностью устаревшая парадигма, который должен был прекратить использоваться 15 лет назад. Вы не можете контролировать, какой браузер, размер экрана и окна просмотра, разрешение, масштаб браузера, масштаб ОС, пользовательский размер шрифта и т. д. будут для пользователя, который просматривает ваш продукт. Больше нет смысла пытаться сделать его «идеальным по пикселям», когда вместо этого мы должны стремиться к динамическим сайтам, которые хорошо выглядят в любых условиях, а не к статическим сайтам, которые всегда выглядят точно так же, как в Photoshop.
Как пиксель-совершенный практик с более чем 10-летним опытом, я настоятельно НЕ рекомендую использовать Tailwind для пиксельных проектов. Я понимаю, насколько заманчивым является Tailwind для разработчиков, которые не знакомы (и/или не хотят) с css/scss. На мой взгляд, это все еще катастрофа для всего мира кодирования. Я говорю это без проверки. Я сделал несколько проектов с утомительным HTML благодаря Tailwind и потратил на очистку HTML-файла даже больше времени, чем время, потраченное на css. Также заметил закономерность, что разработчики бэкенда, которых я нанимал, предпочитают Tailwind, а те, кто хорошо разбирается во фронтенде, — нет.
@StephenMIrving на самом деле «динамические сайты, которые хорошо выглядят в любых условиях» в настоящее время считаются идеальным пиксельным дизайном. По крайней мере, в рабочей среде, где я был.
Ответы 3
Хорошо, понял, мне нужно отредактировать tailwind.config.js и установить там нестандартные размеры. Например:
height: [
...
'278px': '278px',
...
]
Теперь этот размер можно установить с помощью <div clas = "h-278px">...</div>.
Обновлять:
После того, как я выполнил множество проектов поверх TailwindCSS, я понял, что не очень оптимально устанавливать spacing/w/h... в конфигурации tailwind, если он используется только один раз. Лучше использовать пользовательский класс, который вы всегда можете использовать @apply в этом классе.
Обновление 2021:
Начиная с версии 2.1 попутного ветра мы можем включить JIT и использовать произвольные стили, например:
mb-[278px]
Я бы выбрал собственный стиль для этой конкретной цели.
есть ли способ определить пиксель динамически? class = "h-23px ", что число 23px или любой другой пиксель создается динамически
В настоящее время нет, но для этого потребуется какая-то обратная компиляция из HTML/JS/PHP в CSS. Похоже на то, что работает PurgeCSS.
Теперь мы можем реализовать пиксельный дизайн с помощью библиотеки tailwindcss-jit. Они используют обозначение квадратных скобок, например <div class = "h-[278px]">...</div>
спасибо, эндмастер! вау, JIT теперь встроен. В Nuxt мне просто нужно было добавить режим: 'jit' в конфиг. И теперь он такой умный и быстрый, просто создает необходимый CSS!
Упомянут Младен Янетович, вы также можете добавить новый утилиты в настройки попутного ветра. Самый простой способ добавить собственные утилиты в Tailwind — просто добавить их в свой CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.h-278 {
height: 278px;
}
}
Итак, теперь эту высоту можно установить с помощью
<div clas = "h-278">...</div>
Используя директиву @layer, Tailwind автоматически переместит эти стили в то же место, что и @tailwind utilities, чтобы избежать непреднамеренных проблем со специфичностью.
Использование директивы @layer также указывает Tailwind учитывать эти стили для очистки при очистке уровня утилит.
Я не понял, зачем использовать это, если у нас есть tailwind.config.js?
@RomkaLTU основная причина в том, что это рекомендуемый способ добавления пользовательских утилит создателями попутного ветра. вторая не менее интересная причина в том, что с помощью этого метода вы можете генерировать адаптивные варианты, который позволит вам сделать, например, <div clas = "m:h-278">...</div>
Но h - это не пользовательская утилита, пользовательская утилита - это «действительно пользовательская утилита». h, w, p и другие производные свойства интервала.
Это не совсем работает, и я всего лишь пытаюсь разместить красную рамку следующим образом: @layer utilities { .red { border: 1px solid red; } }
Вы можете попробовать это для стиля px и% -
w-[100px] or w-[50%]
Вы никогда не получите идеальные до пикселя проекты из фреймворка, если дизайн не создан специально с учетом возможностей/ожиданий этого фреймворка.