Comment configurer ReactJS Vite Tailwind Styled components
Tags: react, tailwindcss, vite, french
Published: 2023-04-05 21:28:26

Dans cet article je vais vous montrer comment installer et configurer pas à pas tailwind et styled components sur une application ReactJS utilisant Vite. 

Voici le lien github du projet, en cas de soucis n’hésitez pas à vous y référer :

🔗 https://github.com/Delmotte-Vincent/template-react-vite-tailwind-styled-component

&nbsp;
## Création d’une application ReactJS Typescript avec Vite

Pour commencer, créons un projet React avec Vite. Exécutez la commande suivante pour générer un projet.

```bash
npm create vite@latest
```

Plusieurs questions vous sont posées dans le terminal, répondez en fonction de vos besoins. Dans ce tuto j’ai répondu de la manière suivante :

```bash
√ Select a framework: » React
√ Select a variant: » TypeScript
```

Une fois le projet créé, rendez-vous à la racine de ce dernier, puis installez les différentes dépendances et démarrez l’application.

```bash
cd project-name
npm install
npm run dev
```

Lorsque l’application est lancée (environ 5s, **Vite** porte bien son nom), rendez-vous sur l’URL suivante : [http://localhost:5173/](http://localhost:5173/). Vous devriez avoir un écran comme celui-ci :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4quy20zferw7vuhfewqc.png)

&nbsp;
## Installation de tailwind

Passons à l’installation de tailwind. Il faut installer les trois dépendances suivantes : 

- tailwindcss
- postcss
- autoprefixer

Exécutez la commande suivante pour télécharger les dépendances.

```bash
npm install -D tailwindcss postcss autoprefixer
```

Une fois l’installation terminée, vous devriez avoir un **package.json** qui ressemble à cela :

```json
// package.json
"devDependencies": {
	...
	"autoprefixer": "^10.4.14",
	"postcss": "^8.4.21",
	"tailwindcss": "^3.3.1",
	...
}
```

Ensuite il faut créer les fichiers de configuration dédiés de tailwind. Pour cela c’est simple, exécutez la commande suivante : 

```bash
npx tailwindcss init -p
```

Cette commande crée un fichier **tailwind.config.js** **et un fichier ****postcss.config.js** à la racine du projet. Ces fichiers permettent de piloter tailwind dans votre application et de **configurer les différentes options** telles que les endroits où tailwind s’applique, paramétrer le thème ou encore ajouter des plugins.

```jsx
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

```jsx
// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

Nous avons bientôt fini avec l’installation de tailwind, il ne reste plus qu’à ajouter les deux lignes suivantes dans le fichier **tailwind.config.js**.

```jsx
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
		"./index.html", // ✅ ajoutez cette ligne
    "./src/**/*.{js,jsx,ts,tsx}" // ✅ ajoutez cette ligne
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Ajoutez les **directives tailwind** dans le fichier **index.css** et le tour est joué.

```javascript
// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

N’hésitez pas à faire du ménage dans votre projet en supprimant l’intégralité du contenu inutile de **index.css** ainsi que le contenu du fichier **App.tsx** comme cela :

```tsx
// App.tsx
import './App.css'

function App() {
  return (
    <div className="App">
    </div>
  )
}

export default App
```

&nbsp;
## Vérification du setup de tailwind

A ce stade, **tailwind** est installé sur votre projet. Avant de passer à la suite assurons nous que tout fonctionne correctement !

Pour tester que tout fonctionne bien, je vous suggère de remplacer le contenu du fichier **App.tsx** par le code suivant : 

```jsx
// App.tsx
import './App.css'

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  )
}

export default App
```

Relancez l’application, vous devriez avoir l’écran suivant :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnv6g70kroihj6ma8l62.png)

Félicitation, si vous avez bien l’écran ci-dessus, nous pouvons passer à la suite. Si ce n’est pas le cas, reprenez les premières étapes, vous avez peut-être passé un détail !

&nbsp;
## Installation de styled components

Attaquons-nous à l’installation de **styled components**. Pour cela, exécutez la commande ci-dessous.

```bash
npm install --save styled-components
```

Comme dans ce tuto nous utilisons **TypeScript**, nous installons la dépendance des types utilitaires de styled-components.

```bash
npm i --save-dev @types/styled-components
```

Votre package.json devrait ressembler à cela :

```json
// package.json
"dependencies": {
	...
	"styled-components": "^5.3.9"
	...
},
"devDependencies": {
	...
	"@types/styled-components": "^5.1.26",
	...
}
```

&nbsp;
## Vérification du setup de styled-component

Comme pour tailwind, vérifions que tout fonctionne correctement avant de passer à la suite. Ajouter le code suivant dans le **App.tsx** afin de vérifier que **styled components** est bien installé.

```tsx
// App.tsx
import './App.css'
import styled from 'styled-components'

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
      <Button>Button</Button>
    </div>
  )
}

export default App
```

Sauvegardez le projet, vous devriez avoir le titre et un bouton qui s’affichent à l’écran comme ceci :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk45t2gud0rnxvpp85j2.png)

Si tout s’affiche correctement vous pouvez passer à la suite ! Pour les autres, ça sera les rattrapages et il faudra repasser l’épreuve de styled components !

&nbsp;
## Setup de tailwind et styled components

Passons à l’étape importante de cette installation. Installer tailwind n’est pas compliqué, de même pour styled-components, mais utilisez les deux en harmonie est beaucoup moins trivial.

Avant d’utiliser ce superbe outils, il va falloir faire encore un peu d’installation et de setup mais ne perdez pas patience, tout cela en vaut largement le coût !

Pour commencer il faut installer les dépendances suivantes :

- tailwind-styled-components
- twin.macro
- vite-plugin-babel-macros
- postcss-import

```bash
npm install tailwind-styled-components twin.macro vite-plugin-babel-macros postcss-import
```

Une fois les dépendances installées, commençons pas ajouter **macrosPlugin** à la liste plugins de **vite.config.ts**.

```tsx
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import macrosPlugin from 'vite-plugin-babel-macros'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), macrosPlugin()],
})
```

Ensuite, effectuez les actions suivantes sur le fichier **postcss.config.js** :

- Renommez le fichier avec une extension **.cjs**
- Ajoutez aux plugins **postcss-import**
- Changez l’export du fichier avec **module.exports**

Vous obtenez le fichier suivant :

```jsx
// postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

Faites les actions suivantes sur le fichier **tailwind.config.js** :

- Renommez le fichier avec une extension **.cjs**
- Changez l’export du fichier avec **module.exports**

Vous obtenez le fichier suivant :

```jsx
// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Voilà, c’est tout, vous êtes arrivé au bout du périple ! Passons à la vérification.

&nbsp;
### Vérification du setup tailwind styled component

Ne faisons pas durer le suspense, vérifions que tout ce beau monde coexiste en harmonie dans notre projet.

Pour effectuer la vérification, modifiez le code du fichier **App.tsx** comme cela : 

```jsx
import './App.css'
import tw from 'twin.macro'
import styled from 'styled-components'

const Button = styled.button`
  ${tw`
    bg-transparent
    rounded-sm
    border
    border-blue-500
    text-blue-500
    border-solid
    m-1
    px-4
    py-1
  `}
`

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
      <Button>Button</Button>
    </div>
  )
}

export default App
```

Sauvegardez le projet et savourez le fruit de vos efforts. Si l’écran suivant s’affiche sur votre ordinateur, c’est gagné !

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8my35vue37n76nybk5hw.png)

&nbsp;
## Conclusion

Pour conclure, nous avons vu comment installer **tailwind** et **styled-components**. Nous avons également vu comment configurer l’ensemble afin d’utiliser la puissance de tailwind et styled-components combiner. 

Ces outils vous permettrons de construire un frontend de **qualité** dont le code sera plus **lisible** et **concis**. 

N’hésitez pas à tester ces outils et me faire des retours afin de faire un partage d’expérience !

Je vous remet le lien du **Github** afin que vous puissiez avoir un projet fonctionnel avec l’ensemble du setup.

🔗 https://github.com/Delmotte-Vincent/template-react-vite-tailwind-styled-component