Styliser votre première application avec Reactjs / Nextjs avec Tailwind

Bienvenue sur mon premier post !!!

Qu'est-ce-que Nextjs :

Nextjs est un framework open-source qui permet de générer des applications isomorphiques (code partagé entre le client et le serveur)

Son grand avantage concerne la prise en charge de rendu SSR.

Création d'un projet Next.js :

Pour débuter votre projet next.js, vous devez installer create-next-app qui est un kit d'installation officiel de Next.js :

npx create-next-app tailwind-next-app && cd tailwind-next-app

Le double opérateur && permet de jouer une autre commande associée à la première.

Installation de TailwindCSS

L'installation se fait simplement en deux phases, l'une pour l'installation, l'autre pour initialiser le fichier de configuration complet de TailindCSS (via --full) :

npm i tailwindcss
npx tailwindcss init --full

Vous deviez avoir votre fichier tailwind.config.js avec ce type de contenu :

const colors = require('tailwindcss/colors')

module.exports = {
  purge: [],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

     ...

Purgez votre code

Tailwind possède en natif la bibliothèque PurgeCSS qui permet de ne charger que les éléments dont vous avez besoin. Lors du build de votre projet, l'ensemble des éléments inutilisés seront supprimé de vos fichiers CSS.

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  ...

Dans cette partie, nous indiquons que l'ensemble des fichiers (js, ts, jsx et tsx) reliés à vos composants et pages se verrons analysés et donc purgés.

Création de votre fichier CSS avec les directives Tailwind.

Nous devons créer un fichier app.css à la racine de votre projet, celui-ci comportera l'ensemble de votre CSS ainsi que les directives Tailwind vous permettant d'utiliser ce framework dans l'ensemble de votre projet.

/* app.css */
@tailwind  base;
@tailwind  components;
@tailwind  utilities;

//La suite de votre css personnalisé

Connexion de notre CSS avec l'ensemble du projet

Dans cette partie, nous allons importer un fichier qui n'est pas encore présent ( ../styles/styles.css), ce fichier nous permettra de récupérer les styles CSS de votre projet après la purge. Nous devons donc modifier le fichier _app.js pour qu'il cible ce nouveau fichier

// pages/_app.js
import '../styles/styles.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Intallation de dépendances pour la génération de Tailwind sur les différents environnements

npm install concurrently cross-env

Concurently : Automatisation des tâches avec npm depuis le fichier package.json. Possibilité de lancer plusieurs commandes sur chaque environnement.

Ex :

"start": "concurrently \"command1 arg\" \"command2 arg\""

Configuration

// package.json
  "scripts": {
    "build-css": "cross-env NODE_ENV=production tailwindcss build app.css -o ./styles/styles.css",
    "dev-css": "cross-env NODE_ENV=development tailwindcss build app.css -o ./styles/styles.css",
    "next-dev": "next dev",
    "dev": "concurrently \"npm run next-dev\" \"npm run dev-css\"",
    "next-build":"next build",
    "build": "concurrently \"npm run next-build\" \"npm run build-css\"",
    "start": "next start"
  },

Aller plus loin :

Il est possible d'associer deux librairies supplémentaires qui pourront vous accorder un confort supplémentaire concernant la stylisation de votre projet :

postcss : lissage du css, prise en charge des variables, mixins, ...

autoprefixer : Vous permettra de complétement oublier les préfixes des différents fournisseurs de navigateurs :

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Une fois ceci installé, vous devrez générer l'automatisation de votre fichier postcss.config.js en parallèle de Tailwind.

Pour ce faire vous pouvez utiliser cette commande :

npx tailwindcss init --postcss

Je vous conseille grandement de prendre connaissance de cette documentation qui traite de ce sujet : utilisation des préprocesseurs