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 nhsitez pas vous y rfrer :

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

Cration dune application ReactJS Typescript avec Vite

Pour commencer, crons un projet React avec Vite. Excutez la commande suivante pour gnrer un projet.

npm create vite@latest

Plusieurs questions vous sont poses dans le terminal, rpondez en fonction de vos besoins. Dans ce tuto jai rpondu de la manire suivante :

 Select a framework:  React Select a variant:  TypeScript

Une fois le projet cr, rendez-vous la racine de ce dernier, puis installez les diffrentes dpendances et dmarrez lapplication.

cd project-namenpm installnpm run dev

Lorsque lapplication est lance (environ 5s, Vite porte bien son nom), rendez-vous sur lURL suivante : http://localhost:5173/. Vous devriez avoir un cran comme celui-ci :

Installation de tailwind

Passons linstallation de tailwind. Il faut installer les trois dpendances suivantes :

• tailwindcss
• postcss
• autoprefixer

Excutez la commande suivante pour tlcharger les dpendances.

npm install -D tailwindcss postcss autoprefixer

Une fois linstallation termine, 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 crer les fichiers de configuration ddis de tailwind. Pour cela cest simple, excutez la commande suivante :

npx tailwindcss init -p

Cette commande cre 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 diffrentes options telles que les endroits o tailwind sapplique, paramtrer le thme ou encore ajouter des plugins.

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

// postcss.config.jsexport default {  plugins: {    tailwindcss: {},    autoprefixer: {},  },}

Nous avons bientt fini avec linstallation 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;

Nhsitez pas faire du mnage dans votre projet en supprimant lintgralit du contenu inutile de index.css ainsi que le contenu du fichier App.tsx comme cela :

// App.tsximport './App.css'function App() {  return (    <div className="App">    </div>  )}export default App

Vrification 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 suggre de remplacer le contenu du fichier App.tsx par le code suivant :

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

Relancez lapplication, vous devriez avoir lcran suivant :

Flicitation, si vous avez bien lcran ci-dessus, nous pouvons passer la suite. Si ce nest pas le cas, reprenez les premires tapes, vous avez peut-tre pass un dtail !

Installation de styled components

Attaquons-nous linstallation de styled components. Pour cela, excutez la commande ci-dessous.

npm install --save styled-components

Comme dans ce tuto nous utilisons TypeScript, nous installons la dpendance 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",    ...}

Vrification du setup de styled-component

Comme pour tailwind, vrifions que tout fonctionne correctement avant de passer la suite. Ajouter le code suivant dans le App.tsx afin de vrifier que styled components est bien install.

// App.tsximport './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 saffichent lcran comme ceci :

Si tout saffiche correctement vous pouvez passer la suite ! Pour les autres, a sera les rattrapages et il faudra repasser lpreuve de styled components !

Setup de tailwind et styled components

Passons ltape importante de cette installation. Installer tailwind nest pas compliqu, de mme pour styled-components, mais utilisez les deux en harmonie est beaucoup moins trivial.

Avant dutiliser ce superbe outils, il va falloir faire encore un peu dinstallation et de setup mais ne perdez pas patience, tout cela en vaut largement le cot !

Pour commencer il faut installer les dpendances 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 dpendances installes, commenons pas ajouter macrosPlugin la liste plugins de vite.config.ts.

// vite.config.tsimport { 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 lexport du fichier avec module.exports

Vous obtenez le fichier suivant :

// postcss.config.cjsmodule.exports = {  plugins: {    'postcss-import': {},    tailwindcss: {},    autoprefixer: {},  },}

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

• Renommez le fichier avec une extension .cjs
• Changez lexport 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, cest tout, vous tes arriv au bout du priple ! Passons la vrification.

Vrification du setup tailwind styled component

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

Pour effectuer la vrification, 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 lcran suivant saffiche sur votre ordinateur, cest gagn !

Conclusion

Pour conclure, nous avons vu comment installer tailwind et styled-components. Nous avons galement vu comment configurer lensemble afin dutiliser 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.

Nhsitez pas tester ces outils et me faire des retours afin de faire un partage dexprience !

Je vous remet le lien du Github afin que vous puissiez avoir un projet fonctionnel avec lensemble du setup.

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