Lors de la partie authentification, TailwindCss a fait son apparition dans divers fichiers. Allez, on creuse le sujet et on refond la homepage.

Présentation

A utility-first CSS framework for rapidly building custom designs.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

En résumé, on replace dans l’attribut class des éléments du DOM ce qu’il faut pour customiser cette élément. On a là une approche totalement différente d’un bootstrap, préférant fournir des composants clés en main.

Un exemple ?

Avec bootstrap:

<button type="button" class="btn btn-primary">Primary</button>

Avec Tailwind:

<button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Primary</button>

Impacts sur le projet

On va se concentrer sur 3 fichiers ont été crées ou modifiés avec notre installation de jetstream :

• resources/css/style.css
• webpack.mix.js
• tailwind.config.js

Compilation

Sur le fichier permettant de compiler les fichiers de styles/scripts, tu remarqueras l’ajout via postCss de Tailwind. On en reparle avec le fichier de configuration de Tailwind.

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

Feuille de styles

Dans la feuille de style, les éléments de tailwind sont importés.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Configuration tailwind

Plus intéressante, le fichier de config de tailwind. Ici, tu remarqueras un élément “purge”. Oui car tailwind importe un max de classe. Amuse-toi à retirer cet étape et tu verras le poids de ton fichier css :) L’intérêt ici est donc de parser les fichiers où tu mets des classes tailwind, en l’occurrence tes fichiers de vue, et de ne garder dans le fichier css généré que les classes utilisées.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: ['./storage/framework/views/*.php', './resources/views/**/*.blade.php'],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    },

    plugins: [require('@tailwindcss/ui')],
};

Ce sont donc tout un ensemble de classe qu’il faut ici appréhender. J’avoue que les composants bootstrap s’avèrent être de puissants outils qui, à titre personnel, m’apportent aujourd’hui un certain confort dont je n’ai pas envie de me passer. Sinon pour voir ce que ça donne (parce que t’as pas lu tout ça pour rien 😉), direction directement le fichier welcome.blade.php sur github.

Liens

• Code source du projet
• Documentation de Tailwind
• Sommaire du projet