How to create a Reactjs Project with Vitejs and TailwindCSS?

torobbie — Sun, 29 Aug 2021 21:29:35 +0000

1. The first thing we shoud do is create our react project with vite:

With NPM:

$ npm init vite@latest

With Yarn:

$ yarn create vite

2. After that, we need to install the dependencies:

With NPM:

$ npm i

With Yarn:

$ yarn

3. After that, we need to install TailwindCSS:

With NPM:

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

With Yarn:

$ yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

4. We need to create a config file about TailwindCSS and PostCSS

We need to run this in our project:

$ npx tailwindcss init -p

In the generated file, we add these lines:
Purge is crucial for us if we want to use JIT (The new just in time compiler of TailwindCSS).

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
  mode: "jit", // Just in time compiler
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

5. After that, we'll add the directives in the index.css of our project.

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

6. Make sure you have the index.css imported in the index.js, if you don't have it, you have to add it.

// src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
    import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

  // ...

DEV Community: torobbie

How to create a Reactjs Project with Vitejs and TailwindCSS?

1. The first thing we shoud do is create our react project with vite:

2. After that, we need to install the dependencies:

3. After that, we need to install TailwindCSS:

4. We need to create a config file about TailwindCSS and PostCSS

5. After that, we'll add the directives in the index.css of our project.

6. Make sure you have the index.css imported in the index.js, if you don't have it, you have to add it.

¡And that's all!, enjoy Tailwind CSS now 😀.