refactor: reintegrate `tailwindcss` #178, #180

package.json

@@ -12,8 +12,8 @@
     }
   },
   "scripts": {
-    "dev": "tailwindcss --watch && vite",
+    "dev": "vite",
-    "build": "tailwindcss && tsc && vite build && electron-builder",
+    "build": "tsc && vite build && electron-builder",
     "preview": "vite preview",
     "pree2e": "vite build --mode=test",
     "e2e": "playwright test"
@@ -29,6 +29,7 @@
     "autoprefixer": "^10.4.16",
     "electron": "^26.0.0",
     "electron-builder": "^24.6.3",
+    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.3",

postcss.config.cjs

@@ -1,7 +1,8 @@
 module.exports = {
   plugins: {
-   // 'tailwindcss/nesting': {}, // https://tailwindcss.com/docs/using-with-preprocessors#nesting
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },
-} 
+}

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import UpdateElectron from '@/components/update-tailwind'
+import UpdateElectron from '@/components/update'
 import logoVite from './assets/logo-vite.svg'
 import logoElectron from './assets/logo-electron.svg'
 import './App.css'

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

src/main.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './samples/node-api'
 import './index.css'
-import '@/components/update-tailwind/tailwind.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

tailwind.config.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        crimson: "#e01e5a",
-        darkGrey1: "#333",
-        purple1: "#8256d0",
-        modalMask: "rgba(0, 0, 0, 0.5)",
-      },
-      boxShadow: {
-        modalContent: "0 0 10px -4px #8256d0",
-      },
-    },
-  },
-  corePlugins: {
-    preflight: false,
-  },
-  plugins: [],
-};

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+}