Что такое Tailwind-CSS
По сути, tailwind CSS — это CSS-фреймворк, основанный на утилитах, для быстрого создания пользовательских интерфейсов. Это очень настраиваемый CSS фреймворк. Это каркас с такими классами, как flex, p для padding, m для margin, text-center для централизованного текста, rotate, bg-color и т.д., которые могут быть использованы для создания любого дизайна прямо в нашем проекте. С каждым днем он становится самым популярным CSS фреймворком благодаря своей гибкости.
Преимущества Tailwind CSS
Согласно моему опыту, Tailwind CSS — это фреймворк, который очень легко настраивается. Он очень гибок для создания дизайна. Его можно использовать для создания веб-сайтов самым быстрым и простым способом. Здесь больше нет глупых названий классов и идентификаторов CSS. Мы можем настраивать дизайн, чтобы сделать компоненты. Также здесь проще сделать сайт отзывчивым. Его также можно оптимизировать с помощью PurgeCSS.
Изображение: Преимущества Tailwind CSS
Основываясь на этих особенностях, мы можем легко сказать, что Tailwind — это отличное решение для разработчиков, знакомых с CSS, которые хотят ускорить процесс создания и проектирования в долгосрочной перспективе. Но это не такая уж хорошая идея, если вы не знакомы с ванильным CSS и не хотите тратить время на изучение нового CSS-фреймворка.
Сравнение с Bootstrap
Bootstrap является самым популярным фреймворком HTML, CSS и JavaScript для создания отзывчивых веб-сайтов. С другой стороны, Tailwind CSS — это самый популярный CSS-фреймворк для быстрой разработки пользовательского интерфейса.
Если кто-то работает с дизайном, то такой фреймворк, как Bootstrap, не слишком помогает, поскольку приходится писать большую часть собственного CSS. С Tailwind это становится проще благодаря утилитарным классам.
Tailwind отличается от таких фреймворков, как Bootstrap, тем, что это не набор пользовательского интерфейса. У него нет темы по умолчанию, и нет встроенных компонентов пользовательского интерфейса.
Использование Tailwind CSS
Чтобы использовать tailwind css, мы можем воспользоваться двумя способами:__.
Первый способ:- Установите tailwind css через npm,
Шаг-1:- Установите: npm install -D tailwindcss.
Шаг-2:- Настройте пути к шаблонам __tailwind.config.js
Шаг-3:- Установите: npx tailwindcss init
Шаг-4:- Добавьте директивы Tailwind в CSS__src/input.css
Шаг-5:- Запустите процесс_команды сборки Tailwind CLI
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Второй способ:- Использование Tailwind CSS через CDN,
Ссылка:- <!— добавьте его в секцию head html-файла —>
Код с CDN в html-файле
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<body>
<div class="container mx-auto">
<div class="leading-9
text-red-700
bg-red-500 w-full p-5 my-10
border-t-2
border-solid
border-green-500
opacity-40
shadow-2xl">
<h2 class='text-2xl font-bold text-center text-pink-800 uppercase py-2'>Our Top New Brands</h2>
</div>
<div class='container mx-auto py-5'>
<div class='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png"
class='w-full p-2' alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png"
class='w-full p-2' alt='' />
</div>
</div>
</div>
</body>
</html>
Код с помощью npm в файле react javascript library(Brands.js);
import React from 'react';
const Brands = () => {
return (
<div className='container mx-auto py-5'>
<h2 className='text-2xl font-bold justify-center text-pink-800 uppercase pb-6'>Our Top New Brands</h2>
<div className='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png" className='w-full p-2' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png" className='w-full p-2' alt='' />
</div>
</div>
</div>
);
};
export default Brands;
Вот и все в рамках краткого описания о Tailwind CSS. Я надеюсь, что читатели получат хотя бы небольшую пользу.