Skip to content

Commit

Permalink
Add rsbuild-react-tailwindcss-v4 example (#37)
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan authored Mar 21, 2024
1 parent 6cbfc35 commit ee62e60
Show file tree
Hide file tree
Showing 10 changed files with 123 additions and 0 deletions.
13 changes: 13 additions & 0 deletions rsbuild/react-tailwindcss-v4/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Local
.DS_Store
*.local
*.log*

# Dist
node_modules
dist/

# IDE
.vscode/*
!.vscode/extensions.json
.idea
29 changes: 29 additions & 0 deletions rsbuild/react-tailwindcss-v4/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Rsbuild Project

## Setup

Install the dependencies:

```bash
pnpm install
```

## Get Started

Start the dev server:

```bash
pnpm dev
```

Build the app for production:

```bash
pnpm build
```

Preview the production build locally:

```bash
pnpm preview
```
23 changes: 23 additions & 0 deletions rsbuild/react-tailwindcss-v4/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "rsbuild-react-tailwindcss-v4",
"private": true,
"version": "1.0.0",
"scripts": {
"dev": "rsbuild dev --open",
"build": "rsbuild build",
"preview": "rsbuild preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwindcss": "4.0.0-alpha.9"
},
"devDependencies": {
"@rsbuild/core": "^0.5.1",
"@rsbuild/plugin-react": "^0.5.1",
"@tailwindcss/postcss": "4.0.0-alpha.9",
"@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18",
"typescript": "^5.3.0"
}
}
5 changes: 5 additions & 0 deletions rsbuild/react-tailwindcss-v4/postcss.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
6 changes: 6 additions & 0 deletions rsbuild/react-tailwindcss-v4/rsbuild.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
plugins: [pluginReact()],
});
8 changes: 8 additions & 0 deletions rsbuild/react-tailwindcss-v4/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import "tailwindcss";

body {
margin: 0;
color: #fff;
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
background-image: linear-gradient(to bottom, #020917, #101725);
}
14 changes: 14 additions & 0 deletions rsbuild/react-tailwindcss-v4/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import "./App.css";

const App = () => {
return (
<div className="flex flex-col justify-center items-center min-h-screen text-center">
<h1 className="text-6xl font-bold leading-normal">Rsbuild with React</h1>
<p className="text-lg font-normal text-gray-500 leading-normal">
Start building amazing things with Rsbuild.
</p>
</div>
);
};

export default App;
1 change: 1 addition & 0 deletions rsbuild/react-tailwindcss-v4/src/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="@rsbuild/core/types" />
10 changes: 10 additions & 0 deletions rsbuild/react-tailwindcss-v4/src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
14 changes: 14 additions & 0 deletions rsbuild/react-tailwindcss-v4/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": ["DOM", "ES2020"],
"module": "ESNext",
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"isolatedModules": true,
"resolveJsonModule": true,
"moduleResolution": "bundler"
},
"include": ["src"]
}

0 comments on commit ee62e60

Please sign in to comment.