feat: enable tailwind v4

huozhi · Jan 26, 2025 · ff98506 · ff98506
1 parent ed9efd5
commit ff98506
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 76 deletions.
diff --git a/site/app/page.tsx b/site/app/page.tsx
@@ -1,6 +1,6 @@
 import { Codesandbox } from '../ui/codesandbox'
 
-const codeSample4 = {
+const codeSampleCssImport = {
   'index.js': `\
   import { useState } from 'react'
   import Text from './text'
@@ -10,8 +10,8 @@ const codeSample4 = {
     const [num, inc] = useState(1)
     
     return (
-      <div>
-        <h2 class="text-3xl">
+      <div className='container'>
+        <h2>
           hello <Text />
         </h2>
 
@@ -27,8 +27,17 @@ const codeSample4 = {
     return <b>devjar</b>
   }`,
   './styles.css': `\
-  html {
-    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+  }
+  h2 {
+    color: rgba(51, 65, 85);
+    font-weight: 300;
+    font-size: 2rem;
   }
   .title {
     color: rgba(51, 65, 85);
@@ -58,98 +67,71 @@ const codeSample4 = {
   `,
 }
 
-
-const codeSample2 = {
+const codeSampleTheme = {
   'index.js': `\
-import React, { useState } from "react";
+import React, { useState } from 'react'
 
 function App() {
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState(false)
 
   return (
     <div
-      style={{
-        backgroundColor: darkMode ? "#333" : "#fff",
-        color: darkMode ? "#fff" : "#000",
-        height: "100vh",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        flexDirection: "column",
-      }}
+      className={\`flex flex-col items-center justify-center min-h-screen $\{
+        darkMode ? 'bg-gray-800 text-white' : 'bg-white text-black'
+      }\`}
     >
-      <h1>{darkMode ? "Dark Mode" : "Light Mode"}</h1>
-      <button onClick={() => setDarkMode(!darkMode)}>
-        Toggle {darkMode ? "Light" : "Dark"} Mode
+      <h1 className="text-2xl font-semibold mb-4">{darkMode ? 'Dark Mode' : 'Light Mode'}</h1>
+      <button
+        onClick={() => setDarkMode(!darkMode)}
+        className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+      >
+        Toggle {darkMode ? 'Light' : 'Dark'} Mode
       </button>
     </div>
-  );
-}
-
-export default App;
-`,
+  )
 }
 
-const codeSample3 = {
-  'index.js': `\
-  import React, { useState } from "react";
-
-const quotes = [
-  "The only limit to our realization of tomorrow is our doubts of today.",
-  "The future belongs to those who believe in the beauty of their dreams.",
-  "Do not watch the clock. Do what it does. Keep going.",
-  "You miss 100% of the shots you don't take.",
-  "Life is 10% what happens to us and 90% how we react to it."
-];
-
-function App() {
-  const [quote, setQuote] = useState(quotes[0]);
-
-  const generateQuote = () => {
-    const randomIndex = Math.floor(Math.random() * quotes.length);
-    setQuote(quotes[randomIndex]);
-  };
-
-  return (
-    <div style={{ textAlign: "center", padding: "2rem" }}>
-      <h1>Random Quote</h1>
-      <p>"{quote}"</p>
-      <button onClick={generateQuote}>New Quote</button>
-    </div>
-  );
-}
+export default App
 
-export default App;
 `,
 }
 
-const codeSample1 = {
+const codeSamplePlayground = {
   'index.js': `\
 export default function App() {
-  return "hello world"
+  return "type your code here..."
 }
 `,
 }
 
 export default function Page() {
   return (
     <main>
-      <div className='titles'>
+      <div className="titles">
         <h1>Devjar</h1>
-        <h3>
-          Live React Component Previews in Browser
-        </h3>
+        <h3>Live React Component Previews in Browser</h3>
         <p>
-          Devjar lets you create interactive demos, enhance documentation, and deliver real-time code previews with ease. It's simple to integrate and highly adaptable for any React project.
+          Devjar empowers you create interactive, real-time React code preview easier. Builtin <b>Tailwind</b> and{' '}
+          <b>CSS imports</b> for styling, creating demos that are stylish and eye-catching.
         </p>
-        <br />  
+        <br />
+
+        <p>
+          <a href="https://github.com/huozhi/devjar" target="_blank" rel="noopener noreferrer">
+            Source Code & Usage ↗
+          </a>
+        </p>
+      </div>
+
+      <h1 className="text-center">Examples</h1>
+      <div className="codesandboxes">
+        <Codesandbox title="Tailwind CSS" files={codeSampleTheme} />
+        <Codesandbox title="Plain CSS" files={codeSampleCssImport} />
       </div>
 
-      <div className='codesandboxes'>
-        <Codesandbox files={codeSample1} />
-        <Codesandbox files={codeSample4} />
-        <Codesandbox files={codeSample2} />
-        <Codesandbox files={codeSample3} />
+      <div className="playground">
+        <h1>Playground</h1>
+        <Codesandbox files={codeSamplePlayground} />
       </div>
     </main>
   )

diff --git a/site/styles.css b/site/styles.css
@@ -28,6 +28,8 @@ main {
   --sh-jsxliterals: #24292e;
   --sh-entity: #424d5b;
   --sh-property: #1d3147;
+
+  --codice-caret-color: #333;
 }
 
 a, a:focus, a:visited {
@@ -37,6 +39,10 @@ a:hover {
   color: #424d5b;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .editor {
   position: relative;
   max-height: 300px;
@@ -46,16 +52,11 @@ a:hover {
   flex-direction: column;
   box-shadow: 0 24px 40px 4px rgb(200 200 200 / 50%);
 }
-
-pre {
-  width: 100%;
-}
-pre, textarea, .preview--result {
+.preview--result {
   font-family: Consolas, Monaco, monospace;
   border: none;
   font-size: 16px;
   line-height: 1.25em;
-  caret-color: #333;
 }
 textarea:focus,
 textarea:focus-visible {
@@ -176,4 +177,17 @@ textarea:focus-visible {
   font-size: 20px;
   margin: 0;
   padding: 8px 0;
+  color: #404756;
+}
+
+.playground {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 32px 0;
+  line-height: 1.4;
+  width: 100%;
+  max-width: 680px;
+  margin: 0 auto;
 }
diff --git a/site/ui/codesandbox.tsx b/site/ui/codesandbox.tsx
@@ -8,8 +8,10 @@ import FileTab from './file-tab'
 import { useState } from 'react'
 
 export function Codesandbox({
+  title,
   files: initialFiles
 }: {
+  title?: string
   files: Record<string, string>
 }) {
   const [activeFile, setActiveFile] = useState('index.js')
@@ -18,6 +20,7 @@ export function Codesandbox({
 
   return (
     <div data-codesandbox>
+      {title ? <h2>{title}</h2> : null}
       <div className="filetree">
         {Object.keys(files).map((filename) => (
           <div

diff --git a/src/core.ts b/src/core.ts
@@ -202,7 +202,7 @@ function useLiveCode({ getModuleUrl }: { getModuleUrl?: (name: string) => string
 
     const esmShimOptionsScript = createScript(esShimOptionsScriptRef, { content: scriptOptionsContent })
     const appScript = createScript(appScriptRef, { content: appScriptContent, type: 'module' })
-    const tailwindScript = createScript(tailwindcssScriptRef, { src: 'https://cdn.tailwindcss.com' })
+    const tailwindScript = createScript(tailwindcssScriptRef, { src: 'https://unpkg.com/@tailwindcss/browser@4' })
 
     body.appendChild(div)
     body.appendChild(esmShimOptionsScript)
@@ -277,7 +277,7 @@ function useLiveCode({ getModuleUrl }: { getModuleUrl?: (name: string) => string
         }
         setError(undefined)
       } catch (e) {
-        console.error(e)
+        console.warn(e)
         setError(e)
       }
     }