Skip to content

Commit 6b397d9

Browse files
nojafnojaf
authored
Update to Vite 6 and Tailwind 4 (#79)
* Fix audit issues * Update to Tailwind 4
1 parent 7addf2c commit 6b397d9

File tree

12 files changed

+1192
-1857
lines changed

12 files changed

+1192
-1857
lines changed

‎templates/rescript-template-vite/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>ReScript + Vite + React</title>
9+
<link href="/dist/styles.css" rel="stylesheet">
910
</head>
1011

1112
<body>
12-
<div id="root"></div>
13+
<div id="root" class="h-screen flex justify-center items-center"></div>
1314
<script type="module" src="/src/Main.res.mjs"></script>
1415
</body>
1516

‎templates/rescript-template-vite/package-lock.json

+1,090-1,781
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/rescript-template-vite/package.json

+4-5
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@
1717
"react-dom": "^18.2.0"
1818
},
1919
"devDependencies": {
20-
"@vitejs/plugin-react": "^4.2.1",
21-
"autoprefixer": "^10.4.15",
22-
"postcss": "^8.4.28",
23-
"tailwindcss": "^3.3.3",
24-
"vite": "^5.0.6"
20+
"@vitejs/plugin-react": "^4.3.4",
21+
"@tailwindcss/vite": "^4.0.0",
22+
"tailwindcss": "^4.0.0",
23+
"vite": "^6.0.0"
2524
}
2625
}

‎templates/rescript-template-vite/postcss.config.cjs

-6
This file was deleted.

‎templates/rescript-template-vite/src/App.css

-42
This file was deleted.

‎templates/rescript-template-vite/src/App.res

+22-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,34 @@
1+
@module("./assets/rescript-logo.svg")
2+
external rescript: string = "default"
3+
4+
@module("./assets/vite.svg")
5+
external vite: string = "default"
6+
17
@react.component
28
let make = () => {
39
let (count, setCount) = React.useState(() => 0)
410

5-
<div className="p-6">
6-
<h1 className="text-3xl font-semibold"> {"What is this about?"->React.string} </h1>
7-
<p>
8-
{React.string("This is a simple template for a Vite project using ReScript & Tailwind CSS.")}
9-
</p>
10-
<h2 className="text-2xl font-semibold mt-5"> {React.string("Fast Refresh Test")} </h2>
11+
<div className="max-w-200">
12+
<div className="flex justify-evenly items-center">
13+
<img src={vite} alt={"Vite logo"} className="h-24" />
14+
<img src={rescript} alt={"ReScript logo"} className="h-24" />
15+
</div>
16+
<h1 className="text-6xl m-16 font-semibold text-center"> {"Vite + ReScript"->React.string} </h1>
1117
<Button onClick={_ => setCount(count => count + 1)}>
1218
{React.string(`count is ${count->Int.toString}`)}
1319
</Button>
14-
<p>
20+
<p className="my-6 text-center">
1521
{React.string("Edit ")}
16-
<code> {React.string("src/App.res")} </code>
22+
<code className="bg-stone-100 font-mono rounded"> {React.string("src/App.res")} </code>
1723
{React.string(" and save to test Fast Refresh.")}
1824
</p>
25+
<p className="text-center font-thin text-stone-400">
26+
{React.string("Learn more about ")}
27+
<a
28+
href="https://rescript-lang.org/" target="_blank" className="text-blue-500 hover:underline">
29+
{React.string("ReScript")}
30+
{React.string(".")}
31+
</a>
32+
</p>
1933
</div>
2034
}

‎templates/rescript-template-vite/src/Button.res

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// Styling from https://tailwind-elements.com/docs/standard/components/buttons/
22
let make = props =>
33
<button
4-
{...
5-
props}
6-
className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
4+
{...props}
5+
className="block cursor-pointer bg-rescript-500 py-3 px-4 my-16 mx-auto text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-rescript-600 hover:shadow-lg focus:bg-rescript-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-rescript-700 active:shadow-lg transition duration-150 ease-in-out"
76
/>

‎templates/rescript-template-vite/src/assets/rescript-logo.svg

+53
Loading

‎templates/rescript-template-vite/src/assets/vite.svg

+1
Loading

‎templates/rescript-template-vite/src/index.css

+16-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--color-rescript-50: oklch(97% 0.02 27);
5+
--color-rescript-100: oklch(93% 0.04 27);
6+
--color-rescript-200: oklch(87% 0.07 27);
7+
--color-rescript-300: oklch(79% 0.12 27);
8+
--color-rescript-400: oklch(71% 0.16 27);
9+
--color-rescript-500: oklch(63% 0.19 27);
10+
--color-rescript-600: oklch(55% 0.17 27);
11+
--color-rescript-700: oklch(47% 0.15 27);
12+
--color-rescript-800: oklch(39% 0.12 27);
13+
--color-rescript-900: oklch(31% 0.09 27);
14+
--color-rescript-950: oklch(23% 0.06 27);
15+
--font-inter: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
16+
}

‎templates/rescript-template-vite/tailwind.config.cjs

-8
This file was deleted.

‎templates/rescript-template-vite/vite.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { defineConfig } from "vite";
22
import react from "@vitejs/plugin-react";
3+
import tailwindcss from '@tailwindcss/vite';
34

45
// https://vitejs.dev/config/
56
export default defineConfig({
67
plugins: [
8+
tailwindcss(),
79
react({
810
include: ["**/*.res.mjs"],
911
}),

0 commit comments

Comments
 (0)