Якщо ви початківець, основи CSS дуже важливі. Дуже важливо знати, що відбувається на сторінці, як розміщується контент, як елементи підлаштовуються відповідно до доступного простору. Фреймворки не вчать вас цьому всьому. Проте, якщо проєкт досить об'ємний та складається з багатьох елементів, верстати макет ресурсу з нуля – не найкраща ідея. Щоб прискорити цей процес, програмісти використовують CSS-фреймворки.
CSS-фреймворк — це заздалегідь підготовлений набір CSS-файлів. Ідея в тому, щоб при створенні кожного нового проєкту використовувати готовий набір файлів, у яких для вас уже створений макет, задане шрифтове оформлення та написаний весь основний код, загальний для більшості сайтів.
Одним із найпопулярніших CSS-фреймворків являється Tailwind. Він дозволяє швидше писати та підтримувати код програми. Використовуючи цю платформу, яка орієнтована на утиліти, не потрібно писати власний CSS для оформлення програми. Натомість необхідно використовувати службові класи.
<div className="chat-notification">
<div className="chat-notification-logo-wrapper">
<img className="chat-notification-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Echo_chat_icon.svg/1200px-Echo_chat_icon.svg.png"
alt="ChitChat Logo">
</div>
<h4 className="chat-notification-title">ChitChat</h4>
</div>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
}
.chat-notification-logo-wrapper {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
<div className="max-w-sm mx-auto flex p-6 bg-white rounded-lg">
<div className="flex-shrink-0">
<img className="h-12 w-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Echo_chat_icon.svg/1200px-Echo_chat_icon.svg.png"
alt="ChitChat Logo">
</div>
<h4 className="text-xl text-gray-900 leading-tight font-bold">ChitChat</h4>
</div>
Ви можете отримати список усіх службових класів, які можуть запропонувати Tailwind, на сторінці документації.
На відміну від інших CSS-фреймворків, Tailwind не пропонує повністю стилізовані компоненти, натомість він пропонує службові класи, що забезпечує набагато більшу гнучкість і контроль. Це може дозволити створити унікальний сайт.
Режим Just-In-Time (JIT) забезпечує блискавичний час збірки. Компілятор JIT уникає попередньої компіляції всього CSS і компілює CSS лише за необхідності. Саме це призводить до блискавичного часу збірки у всіх середовищах.Tailwind CSS також легко налаштовується. Різноманітні параметри можна легко перевизначити їх у файлі tailwind.config.js.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'yellow': '#ffc82c',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
}
Responsive-дизайн ніколи не був таким простим. Завдяки тегам xs, sm і lg т д., які можна застосовувати до кожного службового класу, тепер не потрібно писати медіа-запити.
Наприклад:
<div className="bg-white my-5 w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<main className="bg-sky-300 md:w-2/3 lg:w-3/4 px-5 py-40">
<h1 className="text-2xl md:text-4xl">Main Content</h1>
</main>
<aside className="bg-green-300 md:w-1/3 lg:w-1/4 px-5 py-40">
<h1 className="text-2xl md:text-4xl">Sidebar</h1>
</aside>
</div>
Отже, якщо ваш додаток досить великий, використання Tailwind CSS може принести вам велику користь. Підвищте ефективність свого проєкту шляхом сегментації складних компонентів і досягнення максимальної оперативності.
