🔧 Try Vite + React + Tailwind CSS
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
Intro
This time, I will try creating a React application by Vite.
And I will also try using Tailwind CSS.
Creating a React project
First, I will create a React project using Vite by following the "Getting Started".
npm create vite@latest my-react-app -- --template react-ts
After creating the project, I will install Tailwind CSS, PostCSS, autoprefixer.
To use TailWind CSS, I should execute "npx tailwindcss init" and add "postcss.config.js".
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
And I change the "tailwind.config.js" like below.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
After that, I also need to add these three rows into "index.css".
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
...
To avoid "Unknown at rule @tailwind" on VSCode, I should install "Tailwind CSS IntelliSense" and add "Files: Associations" into VSCode settings.
warning
settings.json
- Get started with Tailwind CSS - Tailwind CSS
- 【Tailwind CSS】Unknown at rule @tailwind解消法【VSCode】 - Qiita
- Editor Setup - Tailwind CSS
After installing, I can write like below.
App.tsx
import "./App.css";
import {
BrowserRouter as Router,
Route,
Routes,
Link
} from "react-router-dom";
import { IndexPage } from "./IndexPage";
function App() {
return (
<>
<div className="w-full h-screen flex flex-col items-center justify-center">
<div className="w-[86%] h-[90%] bg-[green]">
<Router>
<Link to="/">TOP</Link>
<Routes>
<Route path="/" element={<IndexPage />} />
</Routes>
</Router>
</div>
</div>
</>
)
}
export default App
Environmental variables
I can use environmental variables by ".env", ".env.development(for development)", and ".env.production(for production)".
In Vite projects, variable names have to be prefixed with "VITE_".
.env
VITE_SERVER_APP_URL="http://localhost:3000"
I can get the value like below.
Index.page.tsx
import "./IndexPage.css";
import { useEffect, useState } from "react";
export function IndexPage(): JSX.Element {
useEffect(() => {
fetch(`${import.meta.env.VITE_SERVER_APP_URL}/pointclouds`, {
mode: "cors",
method: "GET"
}).then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));
}, []);
...
}
export default IndexPage;
🔧 Try Vite + React + Tailwind CSS
📈 47.35 Punkte
🔧 Programmierung
🔧 React + Vite + Tailwind project
📈 30.8 Punkte
🔧 Programmierung
🔧 Vite React Tailwind Starter Repository
📈 30.8 Punkte
🔧 Programmierung
🔧 Tailwind CSS in React - Creating Modal Popup
📈 24.06 Punkte
🔧 Programmierung
🔧 React Tailwind CSS Forgot Password Example
📈 24.06 Punkte
🔧 Programmierung
🔧 React with Tailwind CSS File Upload Example
📈 24.06 Punkte
🔧 Programmierung
🔧 The Tale of Tailwind CSS and React
📈 24.06 Punkte
🔧 Programmierung
🔧 Easy Todo List App with React and Tailwind CSS
📈 24.06 Punkte
🔧 Programmierung