J'initie cette page pour faire un peu le point sur CSS suite à l'utilisation par défaut dans Laravel 10 de TailWind à la place de Bootstrap.

Il est indiscutable que ces framework font gagner du temps pour une mise en page efficace… même s'ils peuvent en faire perdre sur leur apprentissage, notamment quand on ne les utilise pas assez régulièrement, éventuellement leur lourdeur…

• site officiel
• tuto grafikart (2020)
• 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 : bitfertig.de ou webatob

@tailwind base;
@tailwind components;
@tailwind utilities;
 
h1 {
	@apply text-3xl dark:text-white;
}
 
/* conversion classes bootstrap en tailwind : https://webatob.com/bootstrap-to-tailwindcss */
.btn-primary {
	@apply bg-blue-500 text-white px-4 py-2 rounded;
}
 
.btn-primary:hover {
	@apply bg-blue-600
}

style ou app.css : cf. tuto grafikart à 20’

Je souhaite aussi recenser ici des infos intéressantes sur les CSS, comme :

• les polices de caractère… et le projet Luciole, police pour malvoyant

@font-face {
	font-family: 'luciole';
	src: url('assets/fonts/luciole-Regular.ttf') format('truetype');
}
 
h1, h2, h3 {
	font-family: 'luciole';
}
 
body {
	font-family: 'luciole';
}

Les frameworks CSS légers :

• pure
• w3css

Les outils associés :

• PurgeCSS pour supprimer les éléments CSS non utilisés
• PostCSS