Tailfind CSS Feuilles de chaleur¶
Tailwind CSS - construire rapidement des sites Web modernes
Tailwind CSS est un framework CSS utilitaire premier avec des classes comme flex, pt-4, text-center et rotation-90 qui peuvent être composées pour construire n'importe quel design, directement dans votre balisage.
Sommaire¶
- [Installation] (#installation)
- [Configuration] (#configuration)
- [Concepts de base] (#core-concepts)
- [Layout] (#layout)
- [Flexbox & Grid] (#flexbox--grid)
- [Spacing] (#spacing)
- [Taille] (#sizing)
- [Typographie] (#typography)
- [Contexte] (#backgrounds)
- [Borders] (#borders)
- [Effets] (#effects)
- [Filtres] (#filters)
- [Tableaux] (#tables)
- [Transitions et animation] (#transitions--animation)
- [Transformations] (#transforms)
- [Interactivité] (#interactivity)
- [SVG] (#svg)
- [Accessibilité] (#accessibility)
- [Conception représentative] (#responsive-design)
- [Mode noir] (#dark-mode)
- [Personnalisation] (#customization)
- [Composants] (#components)
- [Meilleures pratiques] (#best-practices)
Installation¶
CDN (Démarrage rapide)¶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Installer via npm¶
# Install Tailwind CSS
npm install -D tailwindcss
# Initialize Tailwind CSS
npx tailwindcss init
# Install with PostCSS and Autoprefixer
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```_
### Mise en place des puces
```bash
# Create Vite project
npm create vite@latest my-project
cd my-project
# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```_
```javascript
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Suivant.js Configuration¶
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
Configuration¶
Configuration de base¶
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
spacing: {
'72': '18rem',
'84': '21rem',
'96': '24rem',
}
},
},
plugins: [],
}
Configuration avancée¶
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class', // or 'media'
theme: {
screens: {
'xs': '475px',
...defaultTheme.screens,
},
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
}
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(100%)' },
'100%': { transform: 'translateY(0)' },
}
}
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}
Concepts fondamentaux¶
Utilité - Premiers fondamentaux¶
<!-- Traditional CSS -->
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>
<!-- Tailwind CSS -->
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="ml-6 pt-1">
<h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
<p class="text-base text-gray-600 leading-normal">You have a new message!</p>
</div>
</div>
États-Unis d'Amérique¶
<!-- Hover states -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
<!-- Focus states -->
<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded px-3 py-2">
<!-- Active states -->
<button class="bg-blue-500 active:bg-blue-800 text-white px-4 py-2 rounded">
Click me
</button>
<!-- Group hover -->
<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent">
<p class="text-indigo-600 group-hover:text-gray-900">New Project</p>
<p class="text-indigo-500 group-hover:text-gray-500">Create a new project from a variety of starting templates.</p>
</div>
Modificateurs réactifs¶
<!-- Responsive design -->
<img class="w-16 md:w-32 lg:w-48" src="...">
<!-- Mobile first approach -->
<div class="text-center sm:text-left md:text-right lg:text-center">
Responsive text alignment
</div>
Mise en page¶
Conteneur¶
<!-- Container -->
<div class="container mx-auto">
<!-- Content -->
</div>
<!-- Max-width containers -->
<div class="max-w-sm mx-auto">Small container</div>
<div class="max-w-md mx-auto">Medium container</div>
<div class="max-w-lg mx-auto">Large container</div>
<div class="max-w-xl mx-auto">Extra large container</div>
<div class="max-w-2xl mx-auto">2XL container</div>
Taille de la boîte¶
<!-- Box sizing -->
<div class="box-border">box-border</div>
<div class="box-content">box-content</div>
Affichage¶
<!-- Display utilities -->
<div class="block">block</div>
<div class="inline-block">inline-block</div>
<div class="inline">inline</div>
<div class="flex">flex</div>
<div class="inline-flex">inline-flex</div>
<div class="table">table</div>
<div class="grid">grid</div>
<div class="hidden">hidden</div>
Flottes¶
<!-- Float utilities -->
<img class="float-left" src="...">
<img class="float-right" src="...">
<div class="clear-left">clear-left</div>
<div class="clear-right">clear-right</div>
<div class="clear-both">clear-both</div>
Effacer¶
<!-- Clear utilities -->
<div class="clear-left">clear-left</div>
<div class="clear-right">clear-right</div>
<div class="clear-both">clear-both</div>
<div class="clear-none">clear-none</div>
Ajustement d'objet¶
<!-- Object fit -->
<img class="object-contain" src="...">
<img class="object-cover" src="...">
<img class="object-fill" src="...">
<img class="object-none" src="...">
<img class="object-scale-down" src="...">
Position de l'objet¶
<!-- Object position -->
<img class="object-bottom" src="...">
<img class="object-center" src="...">
<img class="object-left" src="...">
<img class="object-left-bottom" src="...">
<img class="object-left-top" src="...">
<img class="object-right" src="...">
<img class="object-right-bottom" src="...">
<img class="object-right-top" src="...">
<img class="object-top" src="...">
Dépassement¶
<!-- Overflow -->
<div class="overflow-auto">overflow-auto</div>
<div class="overflow-hidden">overflow-hidden</div>
<div class="overflow-visible">overflow-visible</div>
<div class="overflow-scroll">overflow-scroll</div>
<div class="overflow-x-auto">overflow-x-auto</div>
<div class="overflow-y-auto">overflow-y-auto</div>
Fonction¶
<!-- Position -->
<div class="static">static</div>
<div class="fixed">fixed</div>
<div class="absolute">absolute</div>
<div class="relative">relative</div>
<div class="sticky">sticky</div>
Haut / droite / bas / gauche¶
<!-- Positioning -->
<div class="absolute top-0 left-0">top-0 left-0</div>
<div class="absolute top-0 right-0">top-0 right-0</div>
<div class="absolute bottom-0 left-0">bottom-0 left-0</div>
<div class="absolute bottom-0 right-0">bottom-0 right-0</div>
<div class="absolute inset-0">inset-0</div>
<div class="absolute inset-x-0">inset-x-0</div>
<div class="absolute inset-y-0">inset-y-0</div>
Visibilité¶
Indice Z¶
<!-- Z-index -->
<div class="z-0">z-0</div>
<div class="z-10">z-10</div>
<div class="z-20">z-20</div>
<div class="z-30">z-30</div>
<div class="z-40">z-40</div>
<div class="z-50">z-50</div>
<div class="z-auto">z-auto</div>
Flexbox & Grille¶
Direction Flex¶
<!-- Flex direction -->
<div class="flex flex-row">flex-row</div>
<div class="flex flex-row-reverse">flex-row-reverse</div>
<div class="flex flex-col">flex-col</div>
<div class="flex flex-col-reverse">flex-col-reverse</div>
Enveloppe flexible¶
<!-- Flex wrap -->
<div class="flex flex-wrap">flex-wrap</div>
<div class="flex flex-wrap-reverse">flex-wrap-reverse</div>
<div class="flex flex-nowrap">flex-nowrap</div>
Flex¶
<!-- Flex -->
<div class="flex-1">flex-1</div>
<div class="flex-auto">flex-auto</div>
<div class="flex-initial">flex-initial</div>
<div class="flex-none">flex-none</div>
Flex Grow¶
<!-- Flex grow -->
<div class="flex-grow">flex-grow</div>
<div class="flex-grow-0">flex-grow-0</div>
Flex Shrink¶
<!-- Flex shrink -->
<div class="flex-shrink">flex-shrink</div>
<div class="flex-shrink-0">flex-shrink-0</div>
Ordre¶
<!-- Order -->
<div class="order-1">order-1</div>
<div class="order-2">order-2</div>
<div class="order-3">order-3</div>
<div class="order-first">order-first</div>
<div class="order-last">order-last</div>
<div class="order-none">order-none</div>
Colonnes du modèle de grille¶
<!-- Grid template columns -->
<div class="grid grid-cols-1">grid-cols-1</div>
<div class="grid grid-cols-2">grid-cols-2</div>
<div class="grid grid-cols-3">grid-cols-3</div>
<div class="grid grid-cols-4">grid-cols-4</div>
<div class="grid grid-cols-5">grid-cols-5</div>
<div class="grid grid-cols-6">grid-cols-6</div>
<div class="grid grid-cols-12">grid-cols-12</div>
<div class="grid grid-cols-none">grid-cols-none</div>
Grille Colonne Début / Fin¶
<!-- Grid column start/end -->
<div class="col-auto">col-auto</div>
<div class="col-span-1">col-span-1</div>
<div class="col-span-2">col-span-2</div>
<div class="col-span-3">col-span-3</div>
<div class="col-start-1">col-start-1</div>
<div class="col-start-2">col-start-2</div>
<div class="col-end-1">col-end-1</div>
<div class="col-end-2">col-end-2</div>
Lignes de modèles de grille¶
<!-- Grid template rows -->
<div class="grid grid-rows-1">grid-rows-1</div>
<div class="grid grid-rows-2">grid-rows-2</div>
<div class="grid grid-rows-3">grid-rows-3</div>
<div class="grid grid-rows-4">grid-rows-4</div>
<div class="grid grid-rows-5">grid-rows-5</div>
<div class="grid grid-rows-6">grid-rows-6</div>
<div class="grid grid-rows-none">grid-rows-none</div>
Grid Row Début / Fin¶
<!-- Grid row start/end -->
<div class="row-auto">row-auto</div>
<div class="row-span-1">row-span-1</div>
<div class="row-span-2">row-span-2</div>
<div class="row-span-3">row-span-3</div>
<div class="row-start-1">row-start-1</div>
<div class="row-start-2">row-start-2</div>
<div class="row-end-1">row-end-1</div>
<div class="row-end-2">row-end-2</div>
Écart¶
<!-- Gap -->
<div class="grid gap-0">gap-0</div>
<div class="grid gap-1">gap-1</div>
<div class="grid gap-2">gap-2</div>
<div class="grid gap-4">gap-4</div>
<div class="grid gap-8">gap-8</div>
<div class="grid gap-x-4">gap-x-4</div>
<div class="grid gap-y-4">gap-y-4</div>
Justifier le contenu¶
<!-- Justify content -->
<div class="flex justify-start">justify-start</div>
<div class="flex justify-end">justify-end</div>
<div class="flex justify-center">justify-center</div>
<div class="flex justify-between">justify-between</div>
<div class="flex justify-around">justify-around</div>
<div class="flex justify-evenly">justify-evenly</div>
Justifier les éléments¶
<!-- Justify items -->
<div class="grid justify-items-start">justify-items-start</div>
<div class="grid justify-items-end">justify-items-end</div>
<div class="grid justify-items-center">justify-items-center</div>
<div class="grid justify-items-stretch">justify-items-stretch</div>
Justifier soi-même¶
<!-- Justify self -->
<div class="justify-self-auto">justify-self-auto</div>
<div class="justify-self-start">justify-self-start</div>
<div class="justify-self-end">justify-self-end</div>
<div class="justify-self-center">justify-self-center</div>
<div class="justify-self-stretch">justify-self-stretch</div>
Aligner le contenu¶
<!-- Align content -->
<div class="flex flex-wrap align-content-start">align-content-start</div>
<div class="flex flex-wrap align-content-end">align-content-end</div>
<div class="flex flex-wrap align-content-center">align-content-center</div>
<div class="flex flex-wrap align-content-between">align-content-between</div>
<div class="flex flex-wrap align-content-around">align-content-around</div>
<div class="flex flex-wrap align-content-evenly">align-content-evenly</div>
Aligner les éléments¶
<!-- Align items -->
<div class="flex items-start">items-start</div>
<div class="flex items-end">items-end</div>
<div class="flex items-center">items-center</div>
<div class="flex items-baseline">items-baseline</div>
<div class="flex items-stretch">items-stretch</div>
S'aligner¶
<!-- Align self -->
<div class="self-auto">self-auto</div>
<div class="self-start">self-start</div>
<div class="self-end">self-end</div>
<div class="self-center">self-center</div>
<div class="self-stretch">self-stretch</div>
<div class="self-baseline">self-baseline</div>
Placer le contenu¶
<!-- Place content -->
<div class="grid place-content-center">place-content-center</div>
<div class="grid place-content-start">place-content-start</div>
<div class="grid place-content-end">place-content-end</div>
<div class="grid place-content-between">place-content-between</div>
<div class="grid place-content-around">place-content-around</div>
<div class="grid place-content-evenly">place-content-evenly</div>
<div class="grid place-content-stretch">place-content-stretch</div>
Placer les éléments¶
<!-- Place items -->
<div class="grid place-items-start">place-items-start</div>
<div class="grid place-items-end">place-items-end</div>
<div class="grid place-items-center">place-items-center</div>
<div class="grid place-items-stretch">place-items-stretch</div>
Placer soi-même¶
<!-- Place self -->
<div class="place-self-auto">place-self-auto</div>
<div class="place-self-start">place-self-start</div>
<div class="place-self-end">place-self-end</div>
<div class="place-self-center">place-self-center</div>
<div class="place-self-stretch">place-self-stretch</div>
Espacement¶
Pading¶
<!-- Padding -->
<div class="p-0">p-0</div>
<div class="p-1">p-1</div>
<div class="p-2">p-2</div>
<div class="p-3">p-3</div>
<div class="p-4">p-4</div>
<div class="p-5">p-5</div>
<div class="p-6">p-6</div>
<div class="p-8">p-8</div>
<div class="p-10">p-10</div>
<div class="p-12">p-12</div>
<div class="p-16">p-16</div>
<div class="p-20">p-20</div>
<div class="p-24">p-24</div>
<div class="p-32">p-32</div>
<div class="p-40">p-40</div>
<div class="p-48">p-48</div>
<div class="p-56">p-56</div>
<div class="p-64">p-64</div>
<!-- Directional padding -->
<div class="pt-4">pt-4</div>
<div class="pr-4">pr-4</div>
<div class="pb-4">pb-4</div>
<div class="pl-4">pl-4</div>
<div class="px-4">px-4</div>
<div class="py-4">py-4</div>
Marge¶
<!-- Margin -->
<div class="m-0">m-0</div>
<div class="m-1">m-1</div>
<div class="m-2">m-2</div>
<div class="m-3">m-3</div>
<div class="m-4">m-4</div>
<div class="m-5">m-5</div>
<div class="m-6">m-6</div>
<div class="m-8">m-8</div>
<div class="m-10">m-10</div>
<div class="m-12">m-12</div>
<div class="m-16">m-16</div>
<div class="m-20">m-20</div>
<div class="m-24">m-24</div>
<div class="m-32">m-32</div>
<div class="m-40">m-40</div>
<div class="m-48">m-48</div>
<div class="m-56">m-56</div>
<div class="m-64">m-64</div>
<div class="m-auto">m-auto</div>
<!-- Directional margin -->
<div class="mt-4">mt-4</div>
<div class="mr-4">mr-4</div>
<div class="mb-4">mb-4</div>
<div class="ml-4">ml-4</div>
<div class="mx-4">mx-4</div>
<div class="my-4">my-4</div>
<!-- Negative margin -->
<div class="-m-1">-m-1</div>
<div class="-mt-1">-mt-1</div>
<div class="-mr-1">-mr-1</div>
<div class="-mb-1">-mb-1</div>
<div class="-ml-1">-ml-1</div>
<div class="-mx-1">-mx-1</div>
<div class="-my-1">-my-1</div>
Espace entre¶
<!-- Space between -->
<div class="flex space-x-1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="flex flex-col space-y-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- Reverse space -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Taille¶
Largeur¶
<!-- Width -->
<div class="w-0">w-0</div>
<div class="w-1">w-1</div>
<div class="w-2">w-2</div>
<div class="w-3">w-3</div>
<div class="w-4">w-4</div>
<div class="w-5">w-5</div>
<div class="w-6">w-6</div>
<div class="w-8">w-8</div>
<div class="w-10">w-10</div>
<div class="w-12">w-12</div>
<div class="w-16">w-16</div>
<div class="w-20">w-20</div>
<div class="w-24">w-24</div>
<div class="w-32">w-32</div>
<div class="w-40">w-40</div>
<div class="w-48">w-48</div>
<div class="w-56">w-56</div>
<div class="w-64">w-64</div>
<div class="w-auto">w-auto</div>
<!-- Fractional widths -->
<div class="w-1/2">w-1/2</div>
<div class="w-1/3">w-1/3</div>
<div class="w-2/3">w-2/3</div>
<div class="w-1/4">w-1/4</div>
<div class="w-2/4">w-2/4</div>
<div class="w-3/4">w-3/4</div>
<div class="w-1/5">w-1/5</div>
<div class="w-2/5">w-2/5</div>
<div class="w-3/5">w-3/5</div>
<div class="w-4/5">w-4/5</div>
<div class="w-1/6">w-1/6</div>
<div class="w-2/6">w-2/6</div>
<div class="w-3/6">w-3/6</div>
<div class="w-4/6">w-4/6</div>
<div class="w-5/6">w-5/6</div>
<div class="w-1/12">w-1/12</div>
<div class="w-2/12">w-2/12</div>
<div class="w-3/12">w-3/12</div>
<div class="w-4/12">w-4/12</div>
<div class="w-5/12">w-5/12</div>
<div class="w-6/12">w-6/12</div>
<div class="w-7/12">w-7/12</div>
<div class="w-8/12">w-8/12</div>
<div class="w-9/12">w-9/12</div>
<div class="w-10/12">w-10/12</div>
<div class="w-11/12">w-11/12</div>
<div class="w-full">w-full</div>
<!-- Viewport widths -->
<div class="w-screen">w-screen</div>
<div class="w-min">w-min</div>
<div class="w-max">w-max</div>
<div class="w-fit">w-fit</div>
Moyenne¶
<!-- Min-width -->
<div class="min-w-0">min-w-0</div>
<div class="min-w-full">min-w-full</div>
<div class="min-w-min">min-w-min</div>
<div class="min-w-max">min-w-max</div>
<div class="min-w-fit">min-w-fit</div>
Max-Width¶
<!-- Max-width -->
<div class="max-w-0">max-w-0</div>
<div class="max-w-none">max-w-none</div>
<div class="max-w-xs">max-w-xs</div>
<div class="max-w-sm">max-w-sm</div>
<div class="max-w-md">max-w-md</div>
<div class="max-w-lg">max-w-lg</div>
<div class="max-w-xl">max-w-xl</div>
<div class="max-w-2xl">max-w-2xl</div>
<div class="max-w-3xl">max-w-3xl</div>
<div class="max-w-4xl">max-w-4xl</div>
<div class="max-w-5xl">max-w-5xl</div>
<div class="max-w-6xl">max-w-6xl</div>
<div class="max-w-7xl">max-w-7xl</div>
<div class="max-w-full">max-w-full</div>
<div class="max-w-min">max-w-min</div>
<div class="max-w-max">max-w-max</div>
<div class="max-w-fit">max-w-fit</div>
<div class="max-w-prose">max-w-prose</div>
<div class="max-w-screen-sm">max-w-screen-sm</div>
<div class="max-w-screen-md">max-w-screen-md</div>
<div class="max-w-screen-lg">max-w-screen-lg</div>
<div class="max-w-screen-xl">max-w-screen-xl</div>
<div class="max-w-screen-2xl">max-w-screen-2xl</div>
Hauteur¶
<!-- Height -->
<div class="h-0">h-0</div>
<div class="h-1">h-1</div>
<div class="h-2">h-2</div>
<div class="h-3">h-3</div>
<div class="h-4">h-4</div>
<div class="h-5">h-5</div>
<div class="h-6">h-6</div>
<div class="h-8">h-8</div>
<div class="h-10">h-10</div>
<div class="h-12">h-12</div>
<div class="h-16">h-16</div>
<div class="h-20">h-20</div>
<div class="h-24">h-24</div>
<div class="h-32">h-32</div>
<div class="h-40">h-40</div>
<div class="h-48">h-48</div>
<div class="h-56">h-56</div>
<div class="h-64">h-64</div>
<div class="h-auto">h-auto</div>
<!-- Fractional heights -->
<div class="h-1/2">h-1/2</div>
<div class="h-1/3">h-1/3</div>
<div class="h-2/3">h-2/3</div>
<div class="h-1/4">h-1/4</div>
<div class="h-2/4">h-2/4</div>
<div class="h-3/4">h-3/4</div>
<div class="h-1/5">h-1/5</div>
<div class="h-2/5">h-2/5</div>
<div class="h-3/5">h-3/5</div>
<div class="h-4/5">h-4/5</div>
<div class="h-1/6">h-1/6</div>
<div class="h-2/6">h-2/6</div>
<div class="h-3/6">h-3/6</div>
<div class="h-4/6">h-4/6</div>
<div class="h-5/6">h-5/6</div>
<div class="h-full">h-full</div>
<!-- Viewport heights -->
<div class="h-screen">h-screen</div>
<div class="h-min">h-min</div>
<div class="h-max">h-max</div>
<div class="h-fit">h-fit</div>
Hauteur minimale¶
<!-- Min-height -->
<div class="min-h-0">min-h-0</div>
<div class="min-h-full">min-h-full</div>
<div class="min-h-screen">min-h-screen</div>
<div class="min-h-min">min-h-min</div>
<div class="min-h-max">min-h-max</div>
<div class="min-h-fit">min-h-fit</div>
Hauteur maximale¶
<!-- Max-height -->
<div class="max-h-0">max-h-0</div>
<div class="max-h-1">max-h-1</div>
<div class="max-h-2">max-h-2</div>
<div class="max-h-3">max-h-3</div>
<div class="max-h-4">max-h-4</div>
<div class="max-h-5">max-h-5</div>
<div class="max-h-6">max-h-6</div>
<div class="max-h-full">max-h-full</div>
<div class="max-h-screen">max-h-screen</div>
<div class="max-h-min">max-h-min</div>
<div class="max-h-max">max-h-max</div>
<div class="max-h-fit">max-h-fit</div>
Typographie¶
Famille de polices¶
<!-- Font family -->
<p class="font-sans">font-sans</p>
<p class="font-serif">font-serif</p>
<p class="font-mono">font-mono</p>
Taille de la police¶
<!-- Font size -->
<p class="text-xs">text-xs</p>
<p class="text-sm">text-sm</p>
<p class="text-base">text-base</p>
<p class="text-lg">text-lg</p>
<p class="text-xl">text-xl</p>
<p class="text-2xl">text-2xl</p>
<p class="text-3xl">text-3xl</p>
<p class="text-4xl">text-4xl</p>
<p class="text-5xl">text-5xl</p>
<p class="text-6xl">text-6xl</p>
<p class="text-7xl">text-7xl</p>
<p class="text-8xl">text-8xl</p>
<p class="text-9xl">text-9xl</p>
Lissage des polices¶
<!-- Font smoothing -->
<p class="antialiased">antialiased</p>
<p class="subpixel-antialiased">subpixel-antialiased</p>
Style de police¶
Poids de la police¶
<!-- Font weight -->
<p class="font-thin">font-thin</p>
<p class="font-extralight">font-extralight</p>
<p class="font-light">font-light</p>
<p class="font-normal">font-normal</p>
<p class="font-medium">font-medium</p>
<p class="font-semibold">font-semibold</p>
<p class="font-bold">font-bold</p>
<p class="font-extrabold">font-extrabold</p>
<p class="font-black">font-black</p>
Variante de police numérique¶
<!-- Font variant numeric -->
<p class="normal-nums">normal-nums</p>
<p class="ordinal">ordinal</p>
<p class="slashed-zero">slashed-zero</p>
<p class="lining-nums">lining-nums</p>
<p class="oldstyle-nums">oldstyle-nums</p>
<p class="proportional-nums">proportional-nums</p>
<p class="tabular-nums">tabular-nums</p>
<p class="diagonal-fractions">diagonal-fractions</p>
<p class="stacked-fractions">stacked-fractions</p>
Espacement des lettres¶
<!-- Letter spacing -->
<p class="tracking-tighter">tracking-tighter</p>
<p class="tracking-tight">tracking-tight</p>
<p class="tracking-normal">tracking-normal</p>
<p class="tracking-wide">tracking-wide</p>
<p class="tracking-wider">tracking-wider</p>
<p class="tracking-widest">tracking-widest</p>
Hauteur de la ligne¶
<!-- Line height -->
<p class="leading-3">leading-3</p>
<p class="leading-4">leading-4</p>
<p class="leading-5">leading-5</p>
<p class="leading-6">leading-6</p>
<p class="leading-7">leading-7</p>
<p class="leading-8">leading-8</p>
<p class="leading-9">leading-9</p>
<p class="leading-10">leading-10</p>
<p class="leading-none">leading-none</p>
<p class="leading-tight">leading-tight</p>
<p class="leading-snug">leading-snug</p>
<p class="leading-normal">leading-normal</p>
<p class="leading-relaxed">leading-relaxed</p>
<p class="leading-loose">leading-loose</p>
Type de style de liste¶
<!-- List style type -->
<ul class="list-none">
<li>list-none</li>
</ul>
<ul class="list-disc">
<li>list-disc</li>
</ul>
<ul class="list-decimal">
<li>list-decimal</li>
</ul>
Position de style de liste¶
<!-- List style position -->
<ul class="list-inside">
<li>list-inside</li>
</ul>
<ul class="list-outside">
<li>list-outside</li>
</ul>
Aligner le texte¶
<!-- Text align -->
<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
<p class="text-justify">text-justify</p>
<p class="text-start">text-start</p>
<p class="text-end">text-end</p>
Couleur du texte¶
<!-- Text color -->
<p class="text-inherit">text-inherit</p>
<p class="text-current">text-current</p>
<p class="text-transparent">text-transparent</p>
<p class="text-black">text-black</p>
<p class="text-white">text-white</p>
<p class="text-slate-50">text-slate-50</p>
<p class="text-slate-100">text-slate-100</p>
<p class="text-slate-200">text-slate-200</p>
<p class="text-slate-300">text-slate-300</p>
<p class="text-slate-400">text-slate-400</p>
<p class="text-slate-500">text-slate-500</p>
<p class="text-slate-600">text-slate-600</p>
<p class="text-slate-700">text-slate-700</p>
<p class="text-slate-800">text-slate-800</p>
<p class="text-slate-900">text-slate-900</p>
<p class="text-slate-950">text-slate-950</p>
Décoration texte¶
<!-- Text decoration -->
<p class="underline">underline</p>
<p class="overline">overline</p>
<p class="line-through">line-through</p>
<p class="no-underline">no-underline</p>
Couleur de décoration du texte¶
<!-- Text decoration color -->
<p class="underline decoration-inherit">decoration-inherit</p>
<p class="underline decoration-current">decoration-current</p>
<p class="underline decoration-transparent">decoration-transparent</p>
<p class="underline decoration-black">decoration-black</p>
<p class="underline decoration-white">decoration-white</p>
Style de décoration de texte¶
<!-- Text decoration style -->
<p class="underline decoration-solid">decoration-solid</p>
<p class="underline decoration-double">decoration-double</p>
<p class="underline decoration-dotted">decoration-dotted</p>
<p class="underline decoration-dashed">decoration-dashed</p>
<p class="underline decoration-wavy">decoration-wavy</p>
Épaisseur de décoration de texte¶
<!-- Text decoration thickness -->
<p class="underline decoration-auto">decoration-auto</p>
<p class="underline decoration-from-font">decoration-from-font</p>
<p class="underline decoration-0">decoration-0</p>
<p class="underline decoration-1">decoration-1</p>
<p class="underline decoration-2">decoration-2</p>
<p class="underline decoration-4">decoration-4</p>
<p class="underline decoration-8">decoration-8</p>
Text Underline Offset¶
<!-- Text underline offset -->
<p class="underline underline-offset-auto">underline-offset-auto</p>
<p class="underline underline-offset-0">underline-offset-0</p>
<p class="underline underline-offset-1">underline-offset-1</p>
<p class="underline underline-offset-2">underline-offset-2</p>
<p class="underline underline-offset-4">underline-offset-4</p>
<p class="underline underline-offset-8">underline-offset-8</p>
Transformer le texte¶
<!-- Text transform -->
<p class="uppercase">uppercase</p>
<p class="lowercase">lowercase</p>
<p class="capitalize">capitalize</p>
<p class="normal-case">normal-case</p>
Dépassement de texte¶
<!-- Text overflow -->
<p class="truncate">truncate</p>
<p class="text-ellipsis overflow-hidden">text-ellipsis</p>
<p class="text-clip overflow-hidden">text-clip</p>
Numéro d'identification¶
<!-- Text indent -->
<p class="indent-0">indent-0</p>
<p class="indent-1">indent-1</p>
<p class="indent-2">indent-2</p>
<p class="indent-4">indent-4</p>
<p class="indent-8">indent-8</p>
Alignement vertical¶
<!-- Vertical align -->
<span class="align-baseline">align-baseline</span>
<span class="align-top">align-top</span>
<span class="align-middle">align-middle</span>
<span class="align-bottom">align-bottom</span>
<span class="align-text-top">align-text-top</span>
<span class="align-text-bottom">align-text-bottom</span>
<span class="align-sub">align-sub</span>
<span class="align-super">align-super</span>
Espace blanc¶
<!-- Whitespace -->
<p class="whitespace-normal">whitespace-normal</p>
<p class="whitespace-nowrap">whitespace-nowrap</p>
<p class="whitespace-pre">whitespace-pre</p>
<p class="whitespace-pre-line">whitespace-pre-line</p>
<p class="whitespace-pre-wrap">whitespace-pre-wrap</p>
Pause de mots¶
<!-- Word break -->
<p class="break-normal">break-normal</p>
<p class="break-words">break-words</p>
<p class="break-all">break-all</p>
<p class="break-keep">break-keep</p>
Contenu¶
Historique¶
Pièce jointe¶
<!-- Background attachment -->
<div class="bg-fixed">bg-fixed</div>
<div class="bg-local">bg-local</div>
<div class="bg-scroll">bg-scroll</div>
Clip de fond¶
<!-- Background clip -->
<div class="bg-clip-border">bg-clip-border</div>
<div class="bg-clip-padding">bg-clip-padding</div>
<div class="bg-clip-content">bg-clip-content</div>
<div class="bg-clip-text">bg-clip-text</div>
Couleur de fond¶
<!-- Background color -->
<div class="bg-inherit">bg-inherit</div>
<div class="bg-current">bg-current</div>
<div class="bg-transparent">bg-transparent</div>
<div class="bg-black">bg-black</div>
<div class="bg-white">bg-white</div>
<div class="bg-slate-50">bg-slate-50</div>
<div class="bg-slate-100">bg-slate-100</div>
<div class="bg-slate-200">bg-slate-200</div>
<div class="bg-slate-300">bg-slate-300</div>
<div class="bg-slate-400">bg-slate-400</div>
<div class="bg-slate-500">bg-slate-500</div>
<div class="bg-slate-600">bg-slate-600</div>
<div class="bg-slate-700">bg-slate-700</div>
<div class="bg-slate-800">bg-slate-800</div>
<div class="bg-slate-900">bg-slate-900</div>
<div class="bg-slate-950">bg-slate-950</div>
Origine¶
<!-- Background origin -->
<div class="bg-origin-border">bg-origin-border</div>
<div class="bg-origin-padding">bg-origin-padding</div>
<div class="bg-origin-content">bg-origin-content</div>
Position générale¶
<!-- Background position -->
<div class="bg-bottom">bg-bottom</div>
<div class="bg-center">bg-center</div>
<div class="bg-left">bg-left</div>
<div class="bg-left-bottom">bg-left-bottom</div>
<div class="bg-left-top">bg-left-top</div>
<div class="bg-right">bg-right</div>
<div class="bg-right-bottom">bg-right-bottom</div>
<div class="bg-right-top">bg-right-top</div>
<div class="bg-top">bg-top</div>
Rappel¶
<!-- Background repeat -->
<div class="bg-repeat">bg-repeat</div>
<div class="bg-no-repeat">bg-no-repeat</div>
<div class="bg-repeat-x">bg-repeat-x</div>
<div class="bg-repeat-y">bg-repeat-y</div>
<div class="bg-repeat-round">bg-repeat-round</div>
<div class="bg-repeat-space">bg-repeat-space</div>
Taille du fond¶
<!-- Background size -->
<div class="bg-auto">bg-auto</div>
<div class="bg-cover">bg-cover</div>
<div class="bg-contain">bg-contain</div>
Image de fond¶
<!-- Background image -->
<div class="bg-none">bg-none</div>
<div class="bg-gradient-to-t">bg-gradient-to-t</div>
<div class="bg-gradient-to-tr">bg-gradient-to-tr</div>
<div class="bg-gradient-to-r">bg-gradient-to-r</div>
<div class="bg-gradient-to-br">bg-gradient-to-br</div>
<div class="bg-gradient-to-b">bg-gradient-to-b</div>
<div class="bg-gradient-to-bl">bg-gradient-to-bl</div>
<div class="bg-gradient-to-l">bg-gradient-to-l</div>
<div class="bg-gradient-to-tl">bg-gradient-to-tl</div>
Arrêts de couleur graduée¶
<!-- Gradient color stops -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-500">from-cyan-500 to-blue-500</div>
<div class="bg-gradient-to-r from-sky-500 via-purple-500 to-pink-500">from-sky-500 via-purple-500 to-pink-500</div>
Frontières¶
Rayon frontalier¶
<!-- Border radius -->
<div class="rounded-none">rounded-none</div>
<div class="rounded-sm">rounded-sm</div>
<div class="rounded">rounded</div>
<div class="rounded-md">rounded-md</div>
<div class="rounded-lg">rounded-lg</div>
<div class="rounded-xl">rounded-xl</div>
<div class="rounded-2xl">rounded-2xl</div>
<div class="rounded-3xl">rounded-3xl</div>
<div class="rounded-full">rounded-full</div>
<!-- Directional border radius -->
<div class="rounded-t-lg">rounded-t-lg</div>
<div class="rounded-r-lg">rounded-r-lg</div>
<div class="rounded-b-lg">rounded-b-lg</div>
<div class="rounded-l-lg">rounded-l-lg</div>
<div class="rounded-tl-lg">rounded-tl-lg</div>
<div class="rounded-tr-lg">rounded-tr-lg</div>
<div class="rounded-br-lg">rounded-br-lg</div>
<div class="rounded-bl-lg">rounded-bl-lg</div>
Largeur de la frontière¶
<!-- Border width -->
<div class="border-0">border-0</div>
<div class="border-2">border-2</div>
<div class="border-4">border-4</div>
<div class="border-8">border-8</div>
<div class="border">border</div>
<!-- Directional border width -->
<div class="border-t">border-t</div>
<div class="border-r">border-r</div>
<div class="border-b">border-b</div>
<div class="border-l">border-l</div>
<div class="border-x">border-x</div>
<div class="border-y">border-y</div>
Couleur de la bordure¶
<!-- Border color -->
<div class="border-inherit">border-inherit</div>
<div class="border-current">border-current</div>
<div class="border-transparent">border-transparent</div>
<div class="border-black">border-black</div>
<div class="border-white">border-white</div>
<div class="border-slate-50">border-slate-50</div>
<div class="border-slate-100">border-slate-100</div>
<div class="border-slate-200">border-slate-200</div>
<div class="border-slate-300">border-slate-300</div>
<div class="border-slate-400">border-slate-400</div>
<div class="border-slate-500">border-slate-500</div>
<div class="border-slate-600">border-slate-600</div>
<div class="border-slate-700">border-slate-700</div>
<div class="border-slate-800">border-slate-800</div>
<div class="border-slate-900">border-slate-900</div>
<div class="border-slate-950">border-slate-950</div>
Style de bordure¶
<!-- Border style -->
<div class="border-solid">border-solid</div>
<div class="border-dashed">border-dashed</div>
<div class="border-dotted">border-dotted</div>
<div class="border-double">border-double</div>
<div class="border-hidden">border-hidden</div>
<div class="border-none">border-none</div>
Diviser la largeur¶
<!-- Divide width -->
<div class="divide-y divide-gray-200">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="divide-x divide-gray-200">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Diviser la couleur¶
<!-- Divide color -->
<div class="divide-y divide-slate-200">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Diviser le style¶
<!-- Divide style -->
<div class="divide-y divide-solid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="divide-y divide-dashed">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="divide-y divide-dotted">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Largeur hors ligne¶
<!-- Outline width -->
<div class="outline-0">outline-0</div>
<div class="outline-1">outline-1</div>
<div class="outline-2">outline-2</div>
<div class="outline-4">outline-4</div>
<div class="outline-8">outline-8</div>
Couleur schématique¶
<!-- Outline color -->
<div class="outline outline-inherit">outline-inherit</div>
<div class="outline outline-current">outline-current</div>
<div class="outline outline-transparent">outline-transparent</div>
<div class="outline outline-black">outline-black</div>
<div class="outline outline-white">outline-white</div>
Style général¶
<!-- Outline style -->
<div class="outline outline-none">outline-none</div>
<div class="outline outline-solid">outline-solid</div>
<div class="outline outline-dashed">outline-dashed</div>
<div class="outline outline-dotted">outline-dotted</div>
<div class="outline outline-double">outline-double</div>
Dépassement des lignes directrices¶
<!-- Outline offset -->
<div class="outline outline-offset-0">outline-offset-0</div>
<div class="outline outline-offset-1">outline-offset-1</div>
<div class="outline outline-offset-2">outline-offset-2</div>
<div class="outline outline-offset-4">outline-offset-4</div>
<div class="outline outline-offset-8">outline-offset-8</div>
Largeur de l'anneau¶
<!-- Ring width -->
<div class="ring-0">ring-0</div>
<div class="ring-1">ring-1</div>
<div class="ring-2">ring-2</div>
<div class="ring">ring</div>
<div class="ring-4">ring-4</div>
<div class="ring-8">ring-8</div>
<div class="ring-inset">ring-inset</div>
Couleur de l'anneau¶
<!-- Ring color -->
<div class="ring ring-inherit">ring-inherit</div>
<div class="ring ring-current">ring-current</div>
<div class="ring ring-transparent">ring-transparent</div>
<div class="ring ring-black">ring-black</div>
<div class="ring ring-white">ring-white</div>
Largeur de la bague¶
<!-- Ring offset width -->
<div class="ring ring-offset-0">ring-offset-0</div>
<div class="ring ring-offset-1">ring-offset-1</div>
<div class="ring ring-offset-2">ring-offset-2</div>
<div class="ring ring-offset-4">ring-offset-4</div>
<div class="ring ring-offset-8">ring-offset-8</div>
Couleur de la bague offset¶
<!-- Ring offset color -->
<div class="ring ring-offset-2 ring-offset-inherit">ring-offset-inherit</div>
<div class="ring ring-offset-2 ring-offset-current">ring-offset-current</div>
<div class="ring ring-offset-2 ring-offset-transparent">ring-offset-transparent</div>
<div class="ring ring-offset-2 ring-offset-black">ring-offset-black</div>
<div class="ring ring-offset-2 ring-offset-white">ring-offset-white</div>
Effets¶
Boîte Ombre¶
<!-- Box shadow -->
<div class="shadow-sm">shadow-sm</div>
<div class="shadow">shadow</div>
<div class="shadow-md">shadow-md</div>
<div class="shadow-lg">shadow-lg</div>
<div class="shadow-xl">shadow-xl</div>
<div class="shadow-2xl">shadow-2xl</div>
<div class="shadow-inner">shadow-inner</div>
<div class="shadow-none">shadow-none</div>
Boîte couleur de l'ombre¶
<!-- Box shadow color -->
<div class="shadow-lg shadow-inherit">shadow-inherit</div>
<div class="shadow-lg shadow-current">shadow-current</div>
<div class="shadow-lg shadow-transparent">shadow-transparent</div>
<div class="shadow-lg shadow-black">shadow-black</div>
<div class="shadow-lg shadow-white">shadow-white</div>
Opacité¶
<!-- Opacity -->
<div class="opacity-0">opacity-0</div>
<div class="opacity-5">opacity-5</div>
<div class="opacity-10">opacity-10</div>
<div class="opacity-20">opacity-20</div>
<div class="opacity-25">opacity-25</div>
<div class="opacity-30">opacity-30</div>
<div class="opacity-40">opacity-40</div>
<div class="opacity-50">opacity-50</div>
<div class="opacity-60">opacity-60</div>
<div class="opacity-70">opacity-70</div>
<div class="opacity-75">opacity-75</div>
<div class="opacity-80">opacity-80</div>
<div class="opacity-90">opacity-90</div>
<div class="opacity-95">opacity-95</div>
<div class="opacity-100">opacity-100</div>
Mélanger le mode¶
<!-- Mix blend mode -->
<div class="mix-blend-normal">mix-blend-normal</div>
<div class="mix-blend-multiply">mix-blend-multiply</div>
<div class="mix-blend-screen">mix-blend-screen</div>
<div class="mix-blend-overlay">mix-blend-overlay</div>
<div class="mix-blend-darken">mix-blend-darken</div>
<div class="mix-blend-lighten">mix-blend-lighten</div>
<div class="mix-blend-color-dodge">mix-blend-color-dodge</div>
<div class="mix-blend-color-burn">mix-blend-color-burn</div>
<div class="mix-blend-hard-light">mix-blend-hard-light</div>
<div class="mix-blend-soft-light">mix-blend-soft-light</div>
<div class="mix-blend-difference">mix-blend-difference</div>
<div class="mix-blend-exclusion">mix-blend-exclusion</div>
<div class="mix-blend-hue">mix-blend-hue</div>
<div class="mix-blend-saturation">mix-blend-saturation</div>
<div class="mix-blend-color">mix-blend-color</div>
<div class="mix-blend-luminosity">mix-blend-luminosity</div>
<div class="mix-blend-plus-lighter">mix-blend-plus-lighter</div>
Mode de mélange de fond¶
<!-- Background blend mode -->
<div class="bg-blend-normal">bg-blend-normal</div>
<div class="bg-blend-multiply">bg-blend-multiply</div>
<div class="bg-blend-screen">bg-blend-screen</div>
<div class="bg-blend-overlay">bg-blend-overlay</div>
<div class="bg-blend-darken">bg-blend-darken</div>
<div class="bg-blend-lighten">bg-blend-lighten</div>
<div class="bg-blend-color-dodge">bg-blend-color-dodge</div>
<div class="bg-blend-color-burn">bg-blend-color-burn</div>
<div class="bg-blend-hard-light">bg-blend-hard-light</div>
<div class="bg-blend-soft-light">bg-blend-soft-light</div>
<div class="bg-blend-difference">bg-blend-difference</div>
<div class="bg-blend-exclusion">bg-blend-exclusion</div>
<div class="bg-blend-hue">bg-blend-hue</div>
<div class="bg-blend-saturation">bg-blend-saturation</div>
<div class="bg-blend-color">bg-blend-color</div>
<div class="bg-blend-luminosity">bg-blend-luminosity</div>
Filtres¶
Flou¶
<!-- Blur -->
<div class="blur-none">blur-none</div>
<div class="blur-sm">blur-sm</div>
<div class="blur">blur</div>
<div class="blur-md">blur-md</div>
<div class="blur-lg">blur-lg</div>
<div class="blur-xl">blur-xl</div>
<div class="blur-2xl">blur-2xl</div>
<div class="blur-3xl">blur-3xl</div>
Luminosité¶
<!-- Brightness -->
<div class="brightness-0">brightness-0</div>
<div class="brightness-50">brightness-50</div>
<div class="brightness-75">brightness-75</div>
<div class="brightness-90">brightness-90</div>
<div class="brightness-95">brightness-95</div>
<div class="brightness-100">brightness-100</div>
<div class="brightness-105">brightness-105</div>
<div class="brightness-110">brightness-110</div>
<div class="brightness-125">brightness-125</div>
<div class="brightness-150">brightness-150</div>
<div class="brightness-200">brightness-200</div>
Contraste¶
<!-- Contrast -->
<div class="contrast-0">contrast-0</div>
<div class="contrast-50">contrast-50</div>
<div class="contrast-75">contrast-75</div>
<div class="contrast-100">contrast-100</div>
<div class="contrast-125">contrast-125</div>
<div class="contrast-150">contrast-150</div>
<div class="contrast-200">contrast-200</div>
Déposer l'ombre¶
<!-- Drop shadow -->
<div class="drop-shadow-sm">drop-shadow-sm</div>
<div class="drop-shadow">drop-shadow</div>
<div class="drop-shadow-md">drop-shadow-md</div>
<div class="drop-shadow-lg">drop-shadow-lg</div>
<div class="drop-shadow-xl">drop-shadow-xl</div>
<div class="drop-shadow-2xl">drop-shadow-2xl</div>
<div class="drop-shadow-none">drop-shadow-none</div>
Échelle grise¶
<!-- Grayscale -->
<div class="grayscale-0">grayscale-0</div>
<div class="grayscale">grayscale</div>
Hue rotate¶
<!-- Hue rotate -->
<div class="hue-rotate-0">hue-rotate-0</div>
<div class="hue-rotate-15">hue-rotate-15</div>
<div class="hue-rotate-30">hue-rotate-30</div>
<div class="hue-rotate-60">hue-rotate-60</div>
<div class="hue-rotate-90">hue-rotate-90</div>
<div class="hue-rotate-180">hue-rotate-180</div>
Inverser¶
Saturate¶
<!-- Saturate -->
<div class="saturate-0">saturate-0</div>
<div class="saturate-50">saturate-50</div>
<div class="saturate-100">saturate-100</div>
<div class="saturate-150">saturate-150</div>
<div class="saturate-200">saturate-200</div>
Sépia¶
Flou de sauvegarde¶
<!-- Backdrop blur -->
<div class="backdrop-blur-none">backdrop-blur-none</div>
<div class="backdrop-blur-sm">backdrop-blur-sm</div>
<div class="backdrop-blur">backdrop-blur</div>
<div class="backdrop-blur-md">backdrop-blur-md</div>
<div class="backdrop-blur-lg">backdrop-blur-lg</div>
<div class="backdrop-blur-xl">backdrop-blur-xl</div>
<div class="backdrop-blur-2xl">backdrop-blur-2xl</div>
<div class="backdrop-blur-3xl">backdrop-blur-3xl</div>
Luminosité¶
<!-- Backdrop brightness -->
<div class="backdrop-brightness-0">backdrop-brightness-0</div>
<div class="backdrop-brightness-50">backdrop-brightness-50</div>
<div class="backdrop-brightness-75">backdrop-brightness-75</div>
<div class="backdrop-brightness-90">backdrop-brightness-90</div>
<div class="backdrop-brightness-95">backdrop-brightness-95</div>
<div class="backdrop-brightness-100">backdrop-brightness-100</div>
<div class="backdrop-brightness-105">backdrop-brightness-105</div>
<div class="backdrop-brightness-110">backdrop-brightness-110</div>
<div class="backdrop-brightness-125">backdrop-brightness-125</div>
<div class="backdrop-brightness-150">backdrop-brightness-150</div>
<div class="backdrop-brightness-200">backdrop-brightness-200</div>
Contraste de sauvegarde¶
<!-- Backdrop contrast -->
<div class="backdrop-contrast-0">backdrop-contrast-0</div>
<div class="backdrop-contrast-50">backdrop-contrast-50</div>
<div class="backdrop-contrast-75">backdrop-contrast-75</div>
<div class="backdrop-contrast-100">backdrop-contrast-100</div>
<div class="backdrop-contrast-125">backdrop-contrast-125</div>
<div class="backdrop-contrast-150">backdrop-contrast-150</div>
<div class="backdrop-contrast-200">backdrop-contrast-200</div>
Backdrop Grayscale¶
<!-- Backdrop grayscale -->
<div class="backdrop-grayscale-0">backdrop-grayscale-0</div>
<div class="backdrop-grayscale">backdrop-grayscale</div>
Rotation de la nuque de fond¶
<!-- Backdrop hue rotate -->
<div class="backdrop-hue-rotate-0">backdrop-hue-rotate-0</div>
<div class="backdrop-hue-rotate-15">backdrop-hue-rotate-15</div>
<div class="backdrop-hue-rotate-30">backdrop-hue-rotate-30</div>
<div class="backdrop-hue-rotate-60">backdrop-hue-rotate-60</div>
<div class="backdrop-hue-rotate-90">backdrop-hue-rotate-90</div>
<div class="backdrop-hue-rotate-180">backdrop-hue-rotate-180</div>
Retourner¶
<!-- Backdrop invert -->
<div class="backdrop-invert-0">backdrop-invert-0</div>
<div class="backdrop-invert">backdrop-invert</div>
Opacité de la chute¶
<!-- Backdrop opacity -->
<div class="backdrop-opacity-0">backdrop-opacity-0</div>
<div class="backdrop-opacity-5">backdrop-opacity-5</div>
<div class="backdrop-opacity-10">backdrop-opacity-10</div>
<div class="backdrop-opacity-20">backdrop-opacity-20</div>
<div class="backdrop-opacity-25">backdrop-opacity-25</div>
<div class="backdrop-opacity-30">backdrop-opacity-30</div>
<div class="backdrop-opacity-40">backdrop-opacity-40</div>
<div class="backdrop-opacity-50">backdrop-opacity-50</div>
<div class="backdrop-opacity-60">backdrop-opacity-60</div>
<div class="backdrop-opacity-70">backdrop-opacity-70</div>
<div class="backdrop-opacity-75">backdrop-opacity-75</div>
<div class="backdrop-opacity-80">backdrop-opacity-80</div>
<div class="backdrop-opacity-90">backdrop-opacity-90</div>
<div class="backdrop-opacity-95">backdrop-opacity-95</div>
<div class="backdrop-opacity-100">backdrop-opacity-100</div>
Saturate de goutte arrière¶
<!-- Backdrop saturate -->
<div class="backdrop-saturate-0">backdrop-saturate-0</div>
<div class="backdrop-saturate-50">backdrop-saturate-50</div>
<div class="backdrop-saturate-100">backdrop-saturate-100</div>
<div class="backdrop-saturate-150">backdrop-saturate-150</div>
<div class="backdrop-saturate-200">backdrop-saturate-200</div>
Sépia de fond¶
<!-- Backdrop sepia -->
<div class="backdrop-sepia-0">backdrop-sepia-0</div>
<div class="backdrop-sepia">backdrop-sepia</div>
Tableaux¶
Collision de la frontière¶
<!-- Border collapse -->
<table class="border-collapse">
<tr>
<td>border-collapse</td>
</tr>
</table>
<table class="border-separate">
<tr>
<td>border-separate</td>
</tr>
</table>
Espacement des frontières¶
<!-- Border spacing -->
<table class="border-separate border-spacing-0">
<tr>
<td>border-spacing-0</td>
</tr>
</table>
<table class="border-separate border-spacing-1">
<tr>
<td>border-spacing-1</td>
</tr>
</table>
<table class="border-separate border-spacing-2">
<tr>
<td>border-spacing-2</td>
</tr>
</table>
<table class="border-separate border-spacing-x-1">
<tr>
<td>border-spacing-x-1</td>
</tr>
</table>
<table class="border-separate border-spacing-y-1">
<tr>
<td>border-spacing-y-1</td>
</tr>
</table>
Tableau-cadre¶
<!-- Table layout -->
<table class="table-auto">
<tr>
<td>table-auto</td>
</tr>
</table>
<table class="table-fixed">
<tr>
<td>table-fixed</td>
</tr>
</table>
Côté légende¶
<!-- Caption side -->
<table class="caption-top">
<caption>caption-top</caption>
<tr>
<td>Cell</td>
</tr>
</table>
<table class="caption-bottom">
<caption>caption-bottom</caption>
<tr>
<td>Cell</td>
</tr>
</table>
Transitions & Animation¶
Biens de transition¶
<!-- Transition property -->
<div class="transition-none">transition-none</div>
<div class="transition-all">transition-all</div>
<div class="transition">transition</div>
<div class="transition-colors">transition-colors</div>
<div class="transition-opacity">transition-opacity</div>
<div class="transition-shadow">transition-shadow</div>
<div class="transition-transform">transition-transform</div>
Durée de transition¶
<!-- Transition duration -->
<div class="transition duration-75">duration-75</div>
<div class="transition duration-100">duration-100</div>
<div class="transition duration-150">duration-150</div>
<div class="transition duration-200">duration-200</div>
<div class="transition duration-300">duration-300</div>
<div class="transition duration-500">duration-500</div>
<div class="transition duration-700">duration-700</div>
<div class="transition duration-1000">duration-1000</div>
Fonction de transition¶
<!-- Transition timing function -->
<div class="transition ease-linear">ease-linear</div>
<div class="transition ease-in">ease-in</div>
<div class="transition ease-out">ease-out</div>
<div class="transition ease-in-out">ease-in-out</div>
Délai de transition¶
<!-- Transition delay -->
<div class="transition delay-75">delay-75</div>
<div class="transition delay-100">delay-100</div>
<div class="transition delay-150">delay-150</div>
<div class="transition delay-200">delay-200</div>
<div class="transition delay-300">delay-300</div>
<div class="transition delay-500">delay-500</div>
<div class="transition delay-700">delay-700</div>
<div class="transition delay-1000">delay-1000</div>
Animation¶
<!-- Animation -->
<div class="animate-none">animate-none</div>
<div class="animate-spin">animate-spin</div>
<div class="animate-ping">animate-ping</div>
<div class="animate-pulse">animate-pulse</div>
<div class="animate-bounce">animate-bounce</div>
Transformes¶
Échelle¶
<!-- Scale -->
<div class="scale-0">scale-0</div>
<div class="scale-50">scale-50</div>
<div class="scale-75">scale-75</div>
<div class="scale-90">scale-90</div>
<div class="scale-95">scale-95</div>
<div class="scale-100">scale-100</div>
<div class="scale-105">scale-105</div>
<div class="scale-110">scale-110</div>
<div class="scale-125">scale-125</div>
<div class="scale-150">scale-150</div>
<!-- Directional scale -->
<div class="scale-x-0">scale-x-0</div>
<div class="scale-x-50">scale-x-50</div>
<div class="scale-x-75">scale-x-75</div>
<div class="scale-x-90">scale-x-90</div>
<div class="scale-x-95">scale-x-95</div>
<div class="scale-x-100">scale-x-100</div>
<div class="scale-x-105">scale-x-105</div>
<div class="scale-x-110">scale-x-110</div>
<div class="scale-x-125">scale-x-125</div>
<div class="scale-x-150">scale-x-150</div>
<div class="scale-y-0">scale-y-0</div>
<div class="scale-y-50">scale-y-50</div>
<div class="scale-y-75">scale-y-75</div>
<div class="scale-y-90">scale-y-90</div>
<div class="scale-y-95">scale-y-95</div>
<div class="scale-y-100">scale-y-100</div>
<div class="scale-y-105">scale-y-105</div>
<div class="scale-y-110">scale-y-110</div>
<div class="scale-y-125">scale-y-125</div>
<div class="scale-y-150">scale-y-150</div>
Rotation¶
<!-- Rotate -->
<div class="rotate-0">rotate-0</div>
<div class="rotate-1">rotate-1</div>
<div class="rotate-2">rotate-2</div>
<div class="rotate-3">rotate-3</div>
<div class="rotate-6">rotate-6</div>
<div class="rotate-12">rotate-12</div>
<div class="rotate-45">rotate-45</div>
<div class="rotate-90">rotate-90</div>
<div class="rotate-180">rotate-180</div>
<!-- Negative rotate -->
<div class="-rotate-1">-rotate-1</div>
<div class="-rotate-2">-rotate-2</div>
<div class="-rotate-3">-rotate-3</div>
<div class="-rotate-6">-rotate-6</div>
<div class="-rotate-12">-rotate-12</div>
<div class="-rotate-45">-rotate-45</div>
<div class="-rotate-90">-rotate-90</div>
<div class="-rotate-180">-rotate-180</div>
Traduire¶
<!-- Translate -->
<div class="translate-x-0">translate-x-0</div>
<div class="translate-x-1">translate-x-1</div>
<div class="translate-x-2">translate-x-2</div>
<div class="translate-x-3">translate-x-3</div>
<div class="translate-x-4">translate-x-4</div>
<div class="translate-x-5">translate-x-5</div>
<div class="translate-x-6">translate-x-6</div>
<div class="translate-x-8">translate-x-8</div>
<div class="translate-x-10">translate-x-10</div>
<div class="translate-x-12">translate-x-12</div>
<div class="translate-x-16">translate-x-16</div>
<div class="translate-x-20">translate-x-20</div>
<div class="translate-x-24">translate-x-24</div>
<div class="translate-x-32">translate-x-32</div>
<div class="translate-x-40">translate-x-40</div>
<div class="translate-x-48">translate-x-48</div>
<div class="translate-x-56">translate-x-56</div>
<div class="translate-x-64">translate-x-64</div>
<!-- Fractional translate -->
<div class="translate-x-1/2">translate-x-1/2</div>
<div class="translate-x-1/3">translate-x-1/3</div>
<div class="translate-x-2/3">translate-x-2/3</div>
<div class="translate-x-1/4">translate-x-1/4</div>
<div class="translate-x-2/4">translate-x-2/4</div>
<div class="translate-x-3/4">translate-x-3/4</div>
<div class="translate-x-full">translate-x-full</div>
<!-- Y-axis translate -->
<div class="translate-y-0">translate-y-0</div>
<div class="translate-y-1">translate-y-1</div>
<div class="translate-y-2">translate-y-2</div>
<div class="translate-y-3">translate-y-3</div>
<div class="translate-y-4">translate-y-4</div>
<div class="translate-y-5">translate-y-5</div>
<div class="translate-y-6">translate-y-6</div>
<div class="translate-y-8">translate-y-8</div>
<div class="translate-y-10">translate-y-10</div>
<div class="translate-y-12">translate-y-12</div>
<div class="translate-y-16">translate-y-16</div>
<div class="translate-y-20">translate-y-20</div>
<div class="translate-y-24">translate-y-24</div>
<div class="translate-y-32">translate-y-32</div>
<div class="translate-y-40">translate-y-40</div>
<div class="translate-y-48">translate-y-48</div>
<div class="translate-y-56">translate-y-56</div>
<div class="translate-y-64">translate-y-64</div>
<!-- Fractional translate -->
<div class="translate-y-1/2">translate-y-1/2</div>
<div class="translate-y-1/3">translate-y-1/3</div>
<div class="translate-y-2/3">translate-y-2/3</div>
<div class="translate-y-1/4">translate-y-1/4</div>
<div class="translate-y-2/4">translate-y-2/4</div>
<div class="translate-y-3/4">translate-y-3/4</div>
<div class="translate-y-full">translate-y-full</div>
<!-- Negative translate -->
<div class="-translate-x-1">-translate-x-1</div>
<div class="-translate-x-2">-translate-x-2</div>
<div class="-translate-x-3">-translate-x-3</div>
<div class="-translate-x-4">-translate-x-4</div>
<div class="-translate-x-5">-translate-x-5</div>
<div class="-translate-x-6">-translate-x-6</div>
<div class="-translate-x-8">-translate-x-8</div>
<div class="-translate-x-10">-translate-x-10</div>
<div class="-translate-x-12">-translate-x-12</div>
<div class="-translate-x-16">-translate-x-16</div>
<div class="-translate-x-20">-translate-x-20</div>
<div class="-translate-x-24">-translate-x-24</div>
<div class="-translate-x-32">-translate-x-32</div>
<div class="-translate-x-40">-translate-x-40</div>
<div class="-translate-x-48">-translate-x-48</div>
<div class="-translate-x-56">-translate-x-56</div>
<div class="-translate-x-64">-translate-x-64</div>
<div class="-translate-y-1">-translate-y-1</div>
<div class="-translate-y-2">-translate-y-2</div>
<div class="-translate-y-3">-translate-y-3</div>
<div class="-translate-y-4">-translate-y-4</div>
<div class="-translate-y-5">-translate-y-5</div>
<div class="-translate-y-6">-translate-y-6</div>
<div class="-translate-y-8">-translate-y-8</div>
<div class="-translate-y-10">-translate-y-10</div>
<div class="-translate-y-12">-translate-y-12</div>
<div class="-translate-y-16">-translate-y-16</div>
<div class="-translate-y-20">-translate-y-20</div>
<div class="-translate-y-24">-translate-y-24</div>
<div class="-translate-y-32">-translate-y-32</div>
<div class="-translate-y-40">-translate-y-40</div>
<div class="-translate-y-48">-translate-y-48</div>
<div class="-translate-y-56">-translate-y-56</div>
<div class="-translate-y-64">-translate-y-64</div>
<!-- Fractional negative translate -->
<div class="-translate-x-1/2">-translate-x-1/2</div>
<div class="-translate-x-1/3">-translate-x-1/3</div>
<div class="-translate-x-2/3">-translate-x-2/3</div>
<div class="-translate-x-1/4">-translate-x-1/4</div>
<div class="-translate-x-2/4">-translate-x-2/4</div>
<div class="-translate-x-3/4">-translate-x-3/4</div>
<div class="-translate-x-full">-translate-x-full</div>
<div class="-translate-y-1/2">-translate-y-1/2</div>
<div class="-translate-y-1/3">-translate-y-1/3</div>
<div class="-translate-y-2/3">-translate-y-2/3</div>
<div class="-translate-y-1/4">-translate-y-1/4</div>
<div class="-translate-y-2/4">-translate-y-2/4</div>
<div class="-translate-y-3/4">-translate-y-3/4</div>
<div class="-translate-y-full">-translate-y-full</div>
Couper¶
<!-- Skew -->
<div class="skew-x-0">skew-x-0</div>
<div class="skew-x-1">skew-x-1</div>
<div class="skew-x-2">skew-x-2</div>
<div class="skew-x-3">skew-x-3</div>
<div class="skew-x-6">skew-x-6</div>
<div class="skew-x-12">skew-x-12</div>
<div class="skew-y-0">skew-y-0</div>
<div class="skew-y-1">skew-y-1</div>
<div class="skew-y-2">skew-y-2</div>
<div class="skew-y-3">skew-y-3</div>
<div class="skew-y-6">skew-y-6</div>
<div class="skew-y-12">skew-y-12</div>
<!-- Negative skew -->
<div class="-skew-x-1">-skew-x-1</div>
<div class="-skew-x-2">-skew-x-2</div>
<div class="-skew-x-3">-skew-x-3</div>
<div class="-skew-x-6">-skew-x-6</div>
<div class="-skew-x-12">-skew-x-12</div>
<div class="-skew-y-1">-skew-y-1</div>
<div class="-skew-y-2">-skew-y-2</div>
<div class="-skew-y-3">-skew-y-3</div>
<div class="-skew-y-6">-skew-y-6</div>
<div class="-skew-y-12">-skew-y-12</div>
Transformer l'origine¶
<!-- Transform origin -->
<div class="origin-center">origin-center</div>
<div class="origin-top">origin-top</div>
<div class="origin-top-right">origin-top-right</div>
<div class="origin-right">origin-right</div>
<div class="origin-bottom-right">origin-bottom-right</div>
<div class="origin-bottom">origin-bottom</div>
<div class="origin-bottom-left">origin-bottom-left</div>
<div class="origin-left">origin-left</div>
<div class="origin-top-left">origin-top-left</div>
Interactivité¶
Couleur exacte¶
<!-- Accent color -->
<input type="checkbox" class="accent-inherit" />
<input type="checkbox" class="accent-current" />
<input type="checkbox" class="accent-transparent" />
<input type="checkbox" class="accent-black" />
<input type="checkbox" class="accent-white" />
<input type="checkbox" class="accent-slate-50" />
<input type="checkbox" class="accent-slate-100" />
<input type="checkbox" class="accent-slate-200" />
<input type="checkbox" class="accent-slate-300" />
<input type="checkbox" class="accent-slate-400" />
<input type="checkbox" class="accent-slate-500" />
<input type="checkbox" class="accent-slate-600" />
<input type="checkbox" class="accent-slate-700" />
<input type="checkbox" class="accent-slate-800" />
<input type="checkbox" class="accent-slate-900" />
<input type="checkbox" class="accent-slate-950" />
Apparence¶
<!-- Appearance -->
<select class="appearance-none">
<option>appearance-none</option>
</select>
<select class="appearance-auto">
<option>appearance-auto</option>
</select>
Curseur¶
<!-- Cursor -->
<div class="cursor-auto">cursor-auto</div>
<div class="cursor-default">cursor-default</div>
<div class="cursor-pointer">cursor-pointer</div>
<div class="cursor-wait">cursor-wait</div>
<div class="cursor-text">cursor-text</div>
<div class="cursor-move">cursor-move</div>
<div class="cursor-help">cursor-help</div>
<div class="cursor-not-allowed">cursor-not-allowed</div>
<div class="cursor-none">cursor-none</div>
<div class="cursor-context-menu">cursor-context-menu</div>
<div class="cursor-progress">cursor-progress</div>
<div class="cursor-cell">cursor-cell</div>
<div class="cursor-crosshair">cursor-crosshair</div>
<div class="cursor-vertical-text">cursor-vertical-text</div>
<div class="cursor-alias">cursor-alias</div>
<div class="cursor-copy">cursor-copy</div>
<div class="cursor-no-drop">cursor-no-drop</div>
<div class="cursor-grab">cursor-grab</div>
<div class="cursor-grabbing">cursor-grabbing</div>
<div class="cursor-all-scroll">cursor-all-scroll</div>
<div class="cursor-col-resize">cursor-col-resize</div>
<div class="cursor-row-resize">cursor-row-resize</div>
<div class="cursor-n-resize">cursor-n-resize</div>
<div class="cursor-e-resize">cursor-e-resize</div>
<div class="cursor-s-resize">cursor-s-resize</div>
<div class="cursor-w-resize">cursor-w-resize</div>
<div class="cursor-ne-resize">cursor-ne-resize</div>
<div class="cursor-nw-resize">cursor-nw-resize</div>
<div class="cursor-se-resize">cursor-se-resize</div>
<div class="cursor-sw-resize">cursor-sw-resize</div>
<div class="cursor-ew-resize">cursor-ew-resize</div>
<div class="cursor-ns-resize">cursor-ns-resize</div>
<div class="cursor-nesw-resize">cursor-nesw-resize</div>
<div class="cursor-nwse-resize">cursor-nwse-resize</div>
<div class="cursor-zoom-in">cursor-zoom-in</div>
<div class="cursor-zoom-out">cursor-zoom-out</div>
Couleur du carter¶
<!-- Caret color -->
<input class="caret-inherit" />
<input class="caret-current" />
<input class="caret-transparent" />
<input class="caret-black" />
<input class="caret-white" />
<input class="caret-slate-50" />
<input class="caret-slate-100" />
<input class="caret-slate-200" />
<input class="caret-slate-300" />
<input class="caret-slate-400" />
<input class="caret-slate-500" />
<input class="caret-slate-600" />
<input class="caret-slate-700" />
<input class="caret-slate-800" />
<input class="caret-slate-900" />
<input class="caret-slate-950" />
Événements de pointeur¶
<!-- Pointer events -->
<div class="pointer-events-none">pointer-events-none</div>
<div class="pointer-events-auto">pointer-events-auto</div>
Redimensionner¶
<!-- Resize -->
<textarea class="resize-none">resize-none</textarea>
<textarea class="resize-y">resize-y</textarea>
<textarea class="resize-x">resize-x</textarea>
<textarea class="resize">resize</textarea>
Faire défiler le comportement¶
<!-- Scroll behavior -->
<div class="scroll-auto">scroll-auto</div>
<div class="scroll-smooth">scroll-smooth</div>
Faire défiler la marge¶
<!-- Scroll margin -->
<div class="scroll-m-0">scroll-m-0</div>
<div class="scroll-m-1">scroll-m-1</div>
<div class="scroll-m-2">scroll-m-2</div>
<div class="scroll-m-3">scroll-m-3</div>
<div class="scroll-m-4">scroll-m-4</div>
<div class="scroll-m-5">scroll-m-5</div>
<div class="scroll-m-6">scroll-m-6</div>
<div class="scroll-m-8">scroll-m-8</div>
<div class="scroll-m-10">scroll-m-10</div>
<div class="scroll-m-12">scroll-m-12</div>
<div class="scroll-m-16">scroll-m-16</div>
<div class="scroll-m-20">scroll-m-20</div>
<div class="scroll-m-24">scroll-m-24</div>
<div class="scroll-m-32">scroll-m-32</div>
<div class="scroll-m-40">scroll-m-40</div>
<div class="scroll-m-48">scroll-m-48</div>
<div class="scroll-m-56">scroll-m-56</div>
<div class="scroll-m-64">scroll-m-64</div>
<!-- Directional scroll margin -->
<div class="scroll-mt-0">scroll-mt-0</div>
<div class="scroll-mr-0">scroll-mr-0</div>
<div class="scroll-mb-0">scroll-mb-0</div>
<div class="scroll-ml-0">scroll-ml-0</div>
<div class="scroll-mx-0">scroll-mx-0</div>
<div class="scroll-my-0">scroll-my-0</div>
Faire défiler le padding¶
<!-- Scroll padding -->
<div class="scroll-p-0">scroll-p-0</div>
<div class="scroll-p-1">scroll-p-1</div>
<div class="scroll-p-2">scroll-p-2</div>
<div class="scroll-p-3">scroll-p-3</div>
<div class="scroll-p-4">scroll-p-4</div>
<div class="scroll-p-5">scroll-p-5</div>
<div class="scroll-p-6">scroll-p-6</div>
<div class="scroll-p-8">scroll-p-8</div>
<div class="scroll-p-10">scroll-p-10</div>
<div class="scroll-p-12">scroll-p-12</div>
<div class="scroll-p-16">scroll-p-16</div>
<div class="scroll-p-20">scroll-p-20</div>
<div class="scroll-p-24">scroll-p-24</div>
<div class="scroll-p-32">scroll-p-32</div>
<div class="scroll-p-40">scroll-p-40</div>
<div class="scroll-p-48">scroll-p-48</div>
<div class="scroll-p-56">scroll-p-56</div>
<div class="scroll-p-64">scroll-p-64</div>
<!-- Directional scroll padding -->
<div class="scroll-pt-0">scroll-pt-0</div>
<div class="scroll-pr-0">scroll-pr-0</div>
<div class="scroll-pb-0">scroll-pb-0</div>
<div class="scroll-pl-0">scroll-pl-0</div>
<div class="scroll-px-0">scroll-px-0</div>
<div class="scroll-py-0">scroll-py-0</div>
Alignez le snap¶
<!-- Scroll snap align -->
<div class="snap-start">snap-start</div>
<div class="snap-end">snap-end</div>
<div class="snap-center">snap-center</div>
<div class="snap-align-none">snap-align-none</div>
Scroll Snap Stop¶
<!-- Scroll snap stop -->
<div class="snap-normal">snap-normal</div>
<div class="snap-always">snap-always</div>
Scroll Snap Type¶
<!-- Scroll snap type -->
<div class="snap-none">snap-none</div>
<div class="snap-x">snap-x</div>
<div class="snap-y">snap-y</div>
<div class="snap-both">snap-both</div>
<div class="snap-mandatory">snap-mandatory</div>
<div class="snap-proximity">snap-proximity</div>
Toucher Action¶
<!-- Touch action -->
<div class="touch-auto">touch-auto</div>
<div class="touch-none">touch-none</div>
<div class="touch-pan-x">touch-pan-x</div>
<div class="touch-pan-left">touch-pan-left</div>
<div class="touch-pan-right">touch-pan-right</div>
<div class="touch-pan-y">touch-pan-y</div>
<div class="touch-pan-up">touch-pan-up</div>
<div class="touch-pan-down">touch-pan-down</div>
<div class="touch-pinch-zoom">touch-pinch-zoom</div>
<div class="touch-manipulation">touch-manipulation</div>
Sélectionner l' utilisateur¶
<!-- User select -->
<div class="select-none">select-none</div>
<div class="select-text">select-text</div>
<div class="select-all">select-all</div>
<div class="select-auto">select-auto</div>
Changements¶
<!-- Will change -->
<div class="will-change-auto">will-change-auto</div>
<div class="will-change-scroll">will-change-scroll</div>
<div class="will-change-contents">will-change-contents</div>
<div class="will-change-transform">will-change-transform</div>
SVG¶
Remplir¶
<!-- Fill -->
<svg class="fill-inherit">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-current">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-transparent">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-black">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="fill-white">
<circle cx="50" cy="50" r="40" />
</svg>
AVERTISSEMENT¶
<!-- Stroke -->
<svg class="stroke-inherit">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-current">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-transparent">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-black">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-white">
<circle cx="50" cy="50" r="40" />
</svg>
Largeur du coup¶
<!-- Stroke width -->
<svg class="stroke-0">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-1">
<circle cx="50" cy="50" r="40" />
</svg>
<svg class="stroke-2">
<circle cx="50" cy="50" r="40" />
</svg>
Accessibilité¶
Lecteurs d'écran¶
<!-- Screen readers -->
<div class="sr-only">sr-only</div>
<div class="not-sr-only">not-sr-only</div>
Objectif¶
<!-- Focus -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
Accessible button
</button>
<input class="focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />
Attributs de l'ARIA¶
<!-- ARIA attributes -->
<button aria-label="Close dialog" class="p-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div role="alert" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
Error message
</div>
Conception sensible¶
Points d'arrêt¶
<!-- Responsive breakpoints -->
<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
Responsive text
</div>
<!-- Mobile first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
Responsive width
</div>
<!-- Hide/show at different breakpoints -->
<div class="block md:hidden">Mobile only</div>
<div class="hidden md:block">Desktop only</div>
Demandes de renseignements sur les contenants¶
<!-- Container queries -->
<div class="@container">
<div class="@lg:text-xl">
Container query text
</div>
</div>
Mode sombre¶
Configuration en mode sombre¶
Classes de modes sombres¶
<!-- Dark mode -->
<div class="bg-white dark:bg-gray-800">
<h1 class="text-gray-900 dark:text-white">
Dark mode heading
</h1>
<p class="text-gray-600 dark:text-gray-300">
Dark mode paragraph
</p>
</div>
<!-- Toggle dark mode -->
<button onclick="toggleDarkMode()" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded">
Toggle Dark Mode
</button>
<script>
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
}
</script>
Personnalisation¶
Élargir le thème¶
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1fb6ff',
'brand-purple': '#7e5bef',
'brand-pink': '#ff49db',
'brand-orange': '#ff7849',
'brand-green': '#13ce66',
'brand-yellow': '#ffc82c',
'brand-gray-dark': '#273444',
'brand-gray': '#8492a6',
'brand-gray-light': '#d3dce6',
},
fontFamily: {
'display': ['Oswald'],
'body': ['"Open Sans"'],
},
spacing: {
'96': '24rem',
'128': '32rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
Composants personnalisés¶
/* Custom components */
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
.card {
@apply bg-white shadow-lg rounded-lg p-6;
}
.input-field {
@apply border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
}
Services publics personnalisés¶
/* Custom utilities */
@layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.text-shadow-lg {
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.bg-gradient-radial {
background-image: radial-gradient(circle, var(--tw-gradient-stops));
}
}
Composantes¶
Composant bouton¶
<!-- Primary button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Primary Button
</button>
<!-- Secondary button -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
Secondary Button
</button>
<!-- Disabled button -->
<button class="bg-gray-300 text-gray-500 font-bold py-2 px-4 rounded cursor-not-allowed" disabled>
Disabled Button
</button>
Composante carte¶
<!-- Basic card -->
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
</div>
</div>
Composante du formulaire¶
<!-- Form -->
<form class="w-full max-w-lg">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
First Name
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
<p class="text-red-500 text-xs italic">Please fill out this field.</p>
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
Last Name
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
E-mail
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="email" type="email">
<p class="text-gray-600 text-xs italic">Some tips - as long as needed</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-2">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
City
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
State
</label>
<div class="relative">
<select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
<option>New Mexico</option>
<option>Missouri</option>
<option>Texas</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
Zip
</label>
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
</div>
</div>
</form>
Composante navigation¶
<!-- Navigation -->
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Docs
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Examples
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
Blog
</a>
</div>
<div>
<a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
</div>
</div>
</nav>
Meilleures pratiques¶
Rendement¶
- Purge non utilisé CSS: Configurer PurgeCSS pour supprimer les styles inutilisés dans la production
- Utilisez le mode JIT: Activez la compilation juste-à-temps pour les constructions plus rapides
- Optimiser pour la production: Minimiser CSS et supprimer les commentaires
Maintenabilité¶
- Utiliser les noms de classes sémantiques: Combiner les classes d'utilité en classes de composants significatives
- Composants d'extraction: Créer des classes de composants réutilisables pour des motifs communs
- Documenter les utilitaires personnalisés: Commenter utilitaires et composants personnalisés
Accessibilité¶
- ** État du point de vue** : Toujours inclure des états de focalisation pour les éléments interactifs
- ** Contraste de couleur**: Assurer un contraste de couleur suffisant pour le texte
- Lecteurs d'écran: Utiliser la classe sr pour le contenu du lecteur d'écran
Conception sensible¶
- Mobile d'abord: Conception pour les appareils mobiles d'abord, puis mise en valeur pour les écrans plus grands
- Test points d'arrêt: Testez votre conception à toutes les tailles de points d'arrêt
- Utilisez les requêtes de conteneur: Considérer les requêtes de conteneurs pour la conception adaptée aux composants
Résumé¶
Tailwind CSS est un framework CSS utilitaire qui fournit des classes d'utilité de bas niveau pour construire des designs personnalisés directement dans votre balisage. Les principaux avantages sont les suivants :
- Utilité-Première: Construire des composants complexes à partir d'un ensemble restreint d'utilitaires primitifs
- Réponse: Chaque classe d'utilité peut être appliquée sous condition à différents points d'arrêt
- ** Personnalisable**: Personnalisez le cadre pour correspondre à votre système de conception
- Performance: supprimer automatiquement les CSS inutilisés dans les constructions de production
- Expérience Developer: Excellent support IntelliSense et outils de développement
En maîtrisant les utilitaires CSS Tailwind et en suivant les meilleures pratiques, vous pouvez construire de belles interfaces utilisateur, réactives et durables rapidement et efficacement.