comment-configurer-reactjs-vite-tailwind-styled-components

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

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.

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 :

√ 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.

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/. Vous devriez avoir un écran comme celui-ci :

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.

npm install -D tailwindcss postcss autoprefixer

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

// 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 :

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.

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

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

// 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é.

// 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 :

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

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

export default App

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 :

// 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 :

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 !

Installation de styled components

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

npm install --save styled-components

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

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

Votre package.json devrait ressembler à cela :

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

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é.

// 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 :

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 !

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

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.

// 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 :

// 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 :

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

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 :

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é !

Hello World with tailwind and styled component

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.