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
===============
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
===============
8 - Enjoy and have fun! š
