Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédente | |
informatique:css [2024/01/03 17:38] – [TailWind] bertrand | informatique:css [2024/03/27 14:46] (Version actuelle) – [TailWind] bertrand |
---|
* [[https://tailwindcss.com|site officiel]] | * [[https://tailwindcss.com|site officiel]] |
* [[https://grafikart.fr/tutoriels/tailwindcss-framework-css-1177|tuto grafikart (2020)]] | * [[https://grafikart.fr/tutoriels/tailwindcss-framework-css-1177|tuto grafikart (2020)]] |
| * [[https://github.com/airblade/vim-tailwind|plug-in vim-tailwind pour avoir l'autocomplétion des classes tailwind]] |
| |
Pour basculer depuis boostrap, on peut voir l'équivalence des classes avec par exemple : https://webatob.com/bootstrap-to-tailwindcss | Pour basculer depuis boostrap, on peut voir l'équivalence des classes avec par exemple : [[https://tools.bitfertig.de/bootstrap2tailwind/index.php|bitfertig.de]] ou [[https://webatob.com/bootstrap-to-tailwindcss|webatob]] |
<note warning>Plutôt que de remplacer les classes bootstrap, notamment pour les principales (//btn-primary//…), il est possible de les définir dans le fichier app.css, cf. ci-dessous !</note> | <note warning>Plutôt que de remplacer les classes bootstrap, notamment pour les principales (//btn-primary//…), il est possible de les définir dans le fichier app.css, cf. ci-dessous !</note> |
<code css> | <code css> |
} | } |
| |
/* conversion classes bootstrap en tailwind (https://webatob.com/bootstrap-to-tailwindcss) */ | /* conversion classes bootstrap en tailwind : https://webatob.com/bootstrap-to-tailwindcss */ |
.btn-primary { | .btn-primary { |
@apply bg-blue-500 text-white px-4 py-2 rounded; | @apply bg-blue-500 text-white px-4 py-2 rounded; |