Styliser votre première application avec  Reactjs / Nextjs avec Tailwind
Tags: tailwindcss, nextjs, react, css
Published: 2021-08-24 13:45:38

Bienvenue sur mon premier post !!!


##Qu'est-ce-que Nextjs :

[Nextjs](https://nextjs.org/) 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 :

```bash
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) :

```bash
npm i tailwindcss
npx tailwindcss init --full
```

Vous deviez avoir votre fichier tailwind.config.js avec ce type de contenu : 
```javascript
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.

```javascript
// 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.

```css
/* 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

```javascript
// 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

```bash
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 :
```bash
"start": "concurrently \"command1 arg\" \"command2 arg\""
```


###Configuration

```json
// 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](https://www.npmjs.com/package/postcss) : lissage du css, prise en charge des variables, mixins, ...

[autoprefixer](https://www.npmjs.com/package/autoprefixer) : Vous permettra de complétement oublier les préfixes des différents fournisseurs de navigateurs :

```bash
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 :

```bash
npx tailwindcss init --postcss
```
Je vous conseille grandement de prendre connaissance de cette documentation qui traite de ce sujet : [utilisation des préprocesseurs](https://tailwindcss.com/docs/using-with-preprocessors)