Update to Tailwind CSS 4

src/index.html

@@ -31,14 +31,14 @@
 			<div class="space-y-2">
 				<div class="sm:grid sm:grid-cols-3">
 					<label for="guideline" class="text-sm font-medium text-gray-900 pt-1.5">Guideline:</label>
-					<select id="guideline" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
+					<select id="guideline" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
 						<option value="nice" selected>National Institute for Health and Clinical Excellence (NICE)</option>
 						<option value="rwh">Royal Women's Hospital (RWH)</option>
 					</select>
 				</div>
 				<div class="sm:grid sm:grid-cols-3">
 					<label for="gestation" class="text-sm font-medium text-gray-900 pt-1.5">Gestational age:</label>
-					<div class="col-span-2 relative rounded-md shadow-sm">
+					<div class="col-span-2 relative rounded-md shadow-xs">
 						<input id="gestation" type="number" value="38" min="23" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[8.8rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
 						<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 							<span class="text-gray-500 text-sm">completed weeks</span>
@@ -47,15 +47,15 @@
 				</div>
 				<div class="sm:grid sm:grid-cols-3">
 					<label for="time_birth" class="text-sm font-medium text-gray-900 pt-1.5">Time of birth:</label>
-					<input id="time_birth" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
+					<input id="time_birth" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
 				</div>
 				<div class="sm:grid sm:grid-cols-3">
 					<label for="time_measurement" class="text-sm font-medium text-gray-900 pt-1.5">Time of measurement:</label>
-					<input id="time_measurement" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
+					<input id="time_measurement" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-xs border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
 				</div>
 				<div class="sm:grid sm:grid-cols-3">
 					<label for="bilirubin" class="text-sm font-medium text-gray-900 pt-1.5">Total bilirubin:</label>
-					<div class="col-span-2 relative rounded-md shadow-sm">
+					<div class="col-span-2 relative rounded-md shadow-xs">
 						<input id="bilirubin" type="number" oninput="updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[4.5rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
 						<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 							<span class="text-gray-500 text-sm">μmol/L</span>

src/main.css

@@ -1,6 +1,6 @@
 /*
 	Neonatal jaundice treatment threshold calculator
-	Copyright (C) 2024  Lee Yingtong Li
+	Copyright (C) 2024-2025  Lee Yingtong Li
 	
 	This program is free software: you can redistribute it and/or modify
 	it under the terms of the GNU Affero General Public License as published by
@@ -16,6 +16,9 @@
 	along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+@plugin "@tailwindcss/forms";
-@tailwind utilities;
+
+@theme {
+	--font-sans: Manrope, Helvetica, Arial, sans-serif;
+}

tailwind.config.js

@@ -1,32 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-/*
-	Neonatal jaundice treatment threshold calculator
-	Copyright (C) 2024  Lee Yingtong Li
-	
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-	
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-	
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-module.exports = {
-	content: ['./src/*.html', './src/*.js'],
-	theme: {
-		extend: {},
-		fontFamily: {
-			'sans': ['Manrope', 'Helvetica', 'Arial', 'sans-serif'],
-		}
-	},
-	plugins: [
-		require('@tailwindcss/forms'),
-	],
-}