Client Dependencies

Client-side dependencies list

Here is a full list of the client-side dependencies and the instructions needed to install them. To understand what the goal of a package is, please refer to the corresponding lesson.

• axios

  npm install axios
  

• @headlessui/react

  npm install @headlessui/react
  

TailwindCSS

Tailwind CSS is a client-side dependency, but we need to explain its integration with React in detail. That’s because Tailwind CSS needs different and customized configurations of other dependencies.

Prerequisites

We need to install the following prerequisites packages to integrate Tailwind CSS:

• PostCSS is a tool for transforming the CSS using JavaScript, which leads to faster performance.
• Autoprefixer is a PostCSS plugin used to parse CSS and add the vendor prefixes that make the styles compatible with different browsers.
• Tailwind CSS is the main package that provides the classes of the framework for the application.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

CRACO

Create React App Configuration Overide, or CRACO, is similar to the npm package. The only difference is that CRACO gives a user the ability to override the default configuration of the application generated by create-react-app. We can follow the steps below to use CRACO to override the default configuration of PostCSS, which will allow us to configure Tailwind CSS easily.

1. We install CRACO:

   npm install @craco/craco
   

2. We change scripts in package.json to look like this:

   // frontend/package.json
   {
     // ...rest of package.json
     "scripts": {
       "start": "PORT=4000 craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "react-scripts eject"
     }
     // ...rest of package.json
   }
   

3. We create a configuration file for CRACO in the root of thefrontend directory:

   touch craco.config.js
   

4. We configure CRACO to use tailwindcss and autoprefixer:

   // frontend/craco.config.js
   module.exports = {
     style: {
       postcss: {
         plugins: [require("tailwindcss"), require("autoprefixer")],
       },
     },
   };
   

Configure TailwindCSS

All the requirements of Tailwind CSS are installed, so we can integrate it easily by following the steps listed below:

1. We generate the following configuration file for Tailwind CSS:

   npx tailwindcss-cli@latest init
   

   We’ll find a file called tailwind.config.js at the root of frontend directory with the following structure:

   // frontend/tailwind.config.js
   module.exports = {
      purge: [],
      darkMode: false,
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    };
   

2. We modify the configuration file to remove any unused styles.

   // frontend/tailwind.config.js
   module.exports = {
      purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
      // ...rest of the file
    };
   

3. We include Tailwind CSS in index.css so that we can use its classes.

   // frontend/src/index.css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;