refactor: upgrade tailwindcss and daisyui

mikesprague · Jan 23, 2025 · 6d56624 · 6d56624
1 parent a2c81df
commit 6d56624
Show file tree

Hide file tree

Showing 12 changed files with 577 additions and 1,899 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,11 +30,11 @@
   },
   "homepage": "https://mikesprague.github.io/react-tailwind-ghpages-starter",
   "dependencies": {
-    "axios": "1.7.9",
-    "daisyui": "4.12.23",
+    "daisyui": "5.0.0-beta.2",
     "dayjs": "1.11.13",
     "dotenv": "16.4.7",
     "he": "1.2.0",
+    "jotai": "2.11.1",
     "nanoid": "5.0.9",
     "prop-types": "15.8.1",
     "react": "19.0.0",
@@ -43,26 +43,24 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@fullhuman/postcss-purgecss": "7.0.2",
     "@tailwindcss/typography": "0.5.16",
+    "@tailwindcss/vite": "4.0.0",
     "@vitejs/plugin-react-swc": "3.7.2",
-    "autoprefixer": "10.4.20",
     "cssnano": "7.0.6",
     "cz-git": "1.11.0",
-    "jotai": "2.11.1",
-    "postcss": "8.5.1",
-    "postcss-cli": "11.0.0",
-    "sass": "1.83.4",
     "stylelint": "16.13.2",
     "stylelint-config-standard": "37.0.0",
-    "stylelint-config-standard-scss": "14.0.0",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "vite": "6.0.11",
     "vite-plugin-html": "3.2.2",
     "vite-plugin-pwa": "0.21.1"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/components/App.css b/src/components/App.css
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,9 +1,8 @@
-import axios from 'axios';
 import { atom, useAtom } from 'jotai';
 import { useEffect } from 'react';
 import { FaGithub, FaQuoteLeft } from 'react-icons/fa';
 
-import './App.scss';
+import './App.css';
 
 const dataAtom = atom(null);
 
@@ -12,13 +11,11 @@ export default function App() {
 
   useEffect(() => {
     const getRemoteData = async () => {
-      const remoteData = await axios
-        .get('https://icanhazdadjoke.com', {
-          headers: {
-            Accept: 'application/json',
-          },
-        })
-        .then((response) => response.data);
+      const remoteData = await fetch('https://icanhazdadjoke.com', {
+        headers: {
+          Accept: 'application/json',
+        },
+      }).then((response) => response.json());
 
       setData(remoteData);
     };
@@ -30,14 +27,14 @@ export default function App() {
     <>
       <div className="hero min-h-screen bg-base-200">
         <div className="hero-content text-center">
-          <div className="">
+          <div>
             <h1 className="text-5xl font-bold">
               React/Tailwind PWA Starter Template
             </h1>
             <blockquote className="mx-auto text-3xl italic leading-normal text-center text-blue-200">
               {data ? (
                 <>
-                  <FaQuoteLeft />
+                  <FaQuoteLeft className="inline mr-1 mb-2" />
                   {` ${data.joke}`}
                 </>
               ) : (
@@ -60,7 +57,7 @@ export default function App() {
       </div>
       <div className="fixed min-w-full text-base text-center bottom-2">
         <a href="https://github.com/mikesprague/react-tailwind-ghpages-starter">
-          <FaGithub />
+          <FaGithub className="inline" />
           {' Back to repo'}
         </a>
       </div>

diff --git a/src/components/App.scss b/src/components/App.scss
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,9 +1,9 @@
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import App from './components/App';
+import App from './components/App.jsx';
 
-import './index.scss';
+import './index.css';
 
 const container = document.getElementById('root');
 const root = createRoot(container);

diff --git a/src/index.scss b/src/index.scss
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
@@ -1,18 +1,6 @@
 module.exports = {
-  extends: ['stylelint-config-standard-scss', 'stylelint-config-standard'],
+  extends: ['stylelint-config-standard'],
   rules: {
-    'scss/at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: [
-          'tailwind',
-          'apply',
-          'variants',
-          'responsive',
-          'screen',
-        ],
-      },
-    ],
     'declaration-block-trailing-semicolon': null,
     'no-descending-specificity': null,
     'no-empty-source': null,

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
diff --git a/vite.config.js b/vite.config.js
@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
@@ -12,6 +13,7 @@ export default defineConfig({
   outDir: './',
   appType: 'spa',
   plugins: [
+    tailwindcss(),
     VitePWA({
       registerType: 'autoUpdate',
     }),