DEV Community

Cover image for React + Vite + TypeScript + TailwindCSS
Sabareeswaran Chandrasekar
Sabareeswaran Chandrasekar

Posted on

React + Vite + TypeScript + TailwindCSS

#react #vite #typescript #tailwindcss

A step-by-step guide to manually set up a React + Vite + TypeScript + TailwindCSS project without using create-react-app:

Step 1: Initialize a Project

mkdir RVTT cd RVTT/ npm init -y
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Vite, React, TypeScript

npm install react react-dom npm install -D vite typescript @types/react @types/react-dom @types/node npm install -D @vitejs/plugin-react
Enter fullscreen mode Exit fullscreen mode

Step 3: Create the Vite + TypeScript Setup

npx tsc --init

Once done edit like below,

{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "jsx": "react-jsx", "moduleResolution": "Node", "esModuleInterop": true, "strict": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true }, "include": ["src"] }
Enter fullscreen mode Exit fullscreen mode

After adding the above content you will get error in that file like something below, just ignore it at this level:

No inputs were found in config file '......./RVTT/tsconfig.json'. Specified 'include' paths were '["src"]' and 'exclude' paths were '[]'.ts Windsurf: Explain Problem JSON schema for the TypeScript compiler's configuration file
Enter fullscreen mode Exit fullscreen mode

Step: 4 Create vite.config.ts

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], })
Enter fullscreen mode Exit fullscreen mode

Step 5: Create Folder Structure

mkdir src touch index.html touch src/main.tsx src/App.tsx src/index.css
Enter fullscreen mode Exit fullscreen mode

index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>React Vite App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

src/main.tsx:

import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode> )
Enter fullscreen mode Exit fullscreen mode

src/App.tsx:

const App = () => { return ( <div className="text-center mt-10 text-2xl text-blue-500"> Hello from React + Vite + Typescript + TailwindCSS </div> ) } export default App
Enter fullscreen mode Exit fullscreen mode

Step 6: Configure TailwindCSS

npm install -D tailwindcss postcss autoprefixer @tailwindcss/postcss
Enter fullscreen mode Exit fullscreen mode

Create tailwind.config.ts:

/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], };
Enter fullscreen mode Exit fullscreen mode

Create postcss.config.ts:

module.exports = { plugins: { '@tailwindcss/postcss': {}, autoprefixer: {}, }, };
Enter fullscreen mode Exit fullscreen mode

Edit src/index.css:

@tailwind base; @tailwind components; @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 7: Update Scripts in package.json:

"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }
Enter fullscreen mode Exit fullscreen mode

Step 8: Run

npm run dev

Final package.json file:

That's it.

Top comments (0)