Add tailwind

package.json

@@ -12,9 +12,12 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.47.0",
     "eslint-plugin-react": "^7.33.2",
+    "postcss": "^8.4.38",
     "solid-devtools": "^0.29.2",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
     "vite-plugin-solid": "^2.8.2"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -7,8 +7,8 @@ const App: Component = () => (
     <div class={styles.App}>
         <header class={styles.header}>
             <img src={logo} class={styles.logo} alt="logo" />
-            <p>
+            <p class="text-red-400 font-black border border-green-500 rounded-lg py-2 px-4">
-          Edit <code>src/App.tsx</code> and save to reload.
+                Edit <code>src/App.tsx</code> and save to reload.
             </p>
             <a
                 class={styles.link}
@@ -16,7 +16,7 @@ const App: Component = () => (
                 target="_blank"
                 rel="noopener noreferrer"
             >
-          Learn Solid
+                Learn Solid
             </a>
         </header>
     </div>

src/index.css

@@ -1,13 +1,3 @@
-body {
+@tailwind base;
-  margin: 0;
+@tailwind components;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+@tailwind utilities;
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./src/**/*.{js,jsx,ts,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
+