DEV Community

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

Posted on

React + Vite + TypeScript + TailwindCSS

#react #tailwindcss #typescript #vite

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)