Create React Project with Vite + TS + Tailwindcss

#TypeScript
#Tailwind
#React

1 - First, init your project. Run the command below:

$  npm create vite@latest project_name -- --template react-ts

2 - Now, access the directory created and install the dependencies:

$ cd project_name
$ npm install

3 - After install the dependencies, we'll install tailwindcss

$ npm install -D tailwindcss postcss autoprefixer

4 - Let's create the tailwind config. To that, run the command below:

$ npx tailwindcss init -p

5 - Insert the code below into the tailwind.config.js:

/** @type {import('tailwindcss').Config} */

export default {
 content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
 ],
 theme: {
extend: {},
 },
 plugins: [],
}

6 - Add the Tailwind directives to your CSS. Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

7 - Test your application inserting the attributes in a className:

$ npm run dev

===============

Hello world!

</h1>

===============

8 - Enjoy and have fun! 😍