КОДЕКС

3 простых компонента TailwindCSS для ваших приложений

Кнопки, значки и многое другое!

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

Я буду использовать приложение на основе React для собственного тестирования. Поэтому некоторые имена атрибутов будут немного неточными. Их легко исправить самостоятельно. Все имена классов такие же, как и у обычных классов Tailwind.

Этот список представляет собой разнообразный набор из нескольких компонентов, которые, на мой взгляд, выглядят достойно. Наслаждаться.

Кнопки

Я сказал это раньше и скажу еще раз. Каждый такой список должен содержать несколько кнопок. Их легко придумать, и они являются отличным минимальным источником вдохновения.

Код можно найти здесь.

Значки

Значки можно использовать для самых разных целей. В основном используется как небольшая кнопка для уведомлений или как небольшой фрагмент информации. Многие приложения используют значки для всего, что вы можете придумать. Они также отлично работают в качестве всплывающей подсказки.

Код можно найти здесь.

Тосты

Тосты - хороший способ уведомить пользователя об определенном действии или ошибке. Они могут быть маленькими, большими, заметными или незначительными в зависимости от сценария использования, который они представляют.

Код можно найти здесь.

Заключение

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

Спасибо за чтение и удачного дня.

Подробнее: М. Виссерс.