Démarrer un projet NextJS avec TailwindCSS et SCSS

NextJS est un framework web moderne en nodeJS et se basant sur React. Rapide est léger, il constitue une solution de choix pour la création de projets simples comme plus complexes. Il présente en outre l'avantage de pouvoir être hébergé sur des services PAAS tels que Vercel. Découvrons ensemble comment l'installer et commencer à faire joujou avec.

Si comme moi tu switches entre différentes versions de node, commences par t'assurer d'être sur une version adéquate :

nvm use 16
nvmdump

Créons le projet

npx create-next-app@latest
# ou
yarn create next-app
# ou
pnpm create next-app

Nous pouvons lancer le serveur interne de l'application afin de tester notre installation :

yarn run dev

Ajoutons les dépendances qui nous seront utiles :

# Choisis tes polices favorites
yarn add @fontsource/montserrat

# Si tu as l'intention de faire des animations
yarn add wow.js
yarn add animate.css

# Si tu as l'intention d'ajouter des particules
yarn add react-tsparticles
yarn add tsparticles

NextJS supporte nativement SASS, nul besoin donc d'importer de librairie ! Toutefois, afin d'utiliser SASS, il faudra renommer manuellement les fichiers qui ont été créés au format CSS, ainsi que modifier leurs appel dans les fichiers JSX.

L'installation complète de TailwindCSS est détaillée sur cette page de la doc officielle. Je te la résume ici :

yarn add tailwindcss@latest postcss@latest autoprefixer@latest
yarn tailwindcss init -p

La seconde commande va te créer automatiquement les fichiers tailwind.config.js et postcss.config.js à la racine de ton projet.

Une modification est nécessaire dans le fichier tailwind.config.js afin d'activer le système de purge :

module.exports = {
-   purge: [],
+   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: 'media',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
  }

Il est possible d'inclure directement TailwindCSS dans le fichier pages/_app.js de cette manière :

import 'tailwindcss/tailwind.css'

Toutefois, nous envisageons ici d'ajouter du CSS custom pour certaines parties de notre projet. Aussi, nous préférerons le faire dans le fichier styles/global.scss :

@tailwind base;
@tailwind components;
@tailwind utilities;

Aller plus loin

• La doc officielle de Next.js
• La doc officielle de TailwindCSS