Tailwind CSS
Начало работы
- создаём next js проект
npx create-next-app my-project
Устанавливаем Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Добавляем пути к файлам в tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};
Добавляем директивы @tailwind в файл ./styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Примеры классов
flex - флекс элемент
justify-end, items-center - то же, что и justify-content: flex-end и align-items: center
p-2 - паддинг 2 rem или 32рх
my-5 - марджин по оси у 5 rem или 80рх
mt-8 - марджин топ 8 rem или 128рх
mb-5 - марджин боттом 5 rem или 80рх
max-w-4xl - максимальная ширина 896px https://tailwindcss.com/docs/max-width
bg-blue-500 - синий цвет фона
text-white - белый цвет текста
text-center - текст по центру
text-xl - размер шрифта 1,25 rem
text-2xl - размер шрифта 1,5 rem
font-bold - жирный шрифт
rounded - закруглить углы блока
Медиазапросы
Пример
class="block sm:inline-block"
Префикс sm: означает, что свойство появляется только на разрешении sm - 640рх и выше
Префиксы для медиа-запросов
sm - 640рх
md - 768рх
lg - 1024рх
xl - 1280рх
Так как Tailwind ориентируется на мобильные устройства, его префиксы действуют по принципу min-width. т.е распространяются на указанное разрешение и выше
Пример:
<div class="w-12 h-12 bg-pink-300 sm:bg-green-300 md:bg-red-500 lg:bg-blue-500"></div>
<button class="bg-blue-500 p-3 text-white rounded text-xl hover:text-black hover:bg-blue-700">Click Me</button>
Переиспользуемость классов
В файле ./styles/globals.css можно указать общие свойства классов при помощи директивы @apply
@tailwind base;
@tailwind components;
.btn {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
@tailwind utilities;
Теперь мы можем просто добавить btn как обычный CSS-класс в HTML
<button class="btn">Отправить</button>
<button class="btn px-6 py-4 bg-red-500">Отправить</button>
Настройки tailwind.config.js
Здесь можно установить пользовательские шрифты, анимацию, определенные брейкпоинты или настроить предварительно созданные служебные классы Tailwind.
//tailwind.config.jsmodule.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: [
"AvenirLTPro-Heavy",
"AvenirLTPro-Light",
"AvenirLTPro-Black",
],
body: ["AvenirLTPro-Medium"],
light: ["AvenirLTPro-Light"],
},
screens: {
xs: "320px",
sx: "420px",
},
colors: {
blue: {
lighter: "#3064b1",
light: "#CAE0FE",
DEFAULT: "#0E71FB",
dark: "#082959",
},
gray: {
lightest: "#F7FAFC",
lighter: "#EBEFF5",
light: "#E6EAF0",
DEFAULT: "#D7DBE0",
dark: "#6E6E6E",
darkest: "#333333",
},
},
animation: {
slideIn: "slideIn 200ms ease-in-out 1",
},
keyframes: {
slideIn: {
"0%": { transform: "translateX(-100vw)" },
"100%": { transform: "translateX(0)" },
},
},
Источники:
https://ux.pub/dexa/kastomnyie-effiekty-dlia-izobrazhienii-v-nextjs-s-pomoshchiu-tailwind-css-37ib
https://qwertybox.ru/articles/193952/
https://habr.com/ru/post/508844/
https://webformyself.com/v-dobryj-put-tailwind-css/