timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 1 year ago. Zu Änderung gehen
1 file changed, 41 insertions
lit_with_tailwind_css.html(Datei erstellt)
| @@ -0,0 +1,41 @@ | |||
| 1 | + | <!DOCTYPE html> | |
| 2 | + | <html lang="en"> | |
| 3 | + | <head> | |
| 4 | + | <meta charset="UTF-8"> | |
| 5 | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | + | <title>Lit with Tailwind CSS</title> | |
| 7 | + | <!-- 引入 Tailwind CSS --> | |
| 8 | + | <script src="https://cdn.tailwindcss.com"></script> | |
| 9 | + | <!-- 引入 Lit --> | |
| 10 | + | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> | |
| 11 | + | </head> | |
| 12 | + | <body> | |
| 13 | + | <!-- 自訂元件 --> | |
| 14 | + | <my-component></my-component> | |
| 15 | + | ||
| 16 | + | <script type="module"> | |
| 17 | + | import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; | |
| 18 | + | ||
| 19 | + | class MyComponent extends LitElement { | |
| 20 | + | // 禁用 Shadow DOM 讓 Tailwind CSS 生效 | |
| 21 | + | createRenderRoot() { | |
| 22 | + | return this; // 渲染到 Light DOM | |
| 23 | + | } | |
| 24 | + | ||
| 25 | + | render() { | |
| 26 | + | return html` | |
| 27 | + | <div class="p-4 bg-blue-500 text-white text-center rounded-lg shadow-lg"> | |
| 28 | + | <h1 class="text-2xl font-bold">Hello, Tailwind CSS with Lit!</h1> | |
| 29 | + | <p class="mt-2">This is an example of using Tailwind CSS with Lit.</p> | |
| 30 | + | <button class="mt-4 px-4 py-2 bg-white text-blue-500 font-semibold rounded hover:bg-gray-200"> | |
| 31 | + | Click Me | |
| 32 | + | </button> | |
| 33 | + | </div> | |
| 34 | + | `; | |
| 35 | + | } | |
| 36 | + | } | |
| 37 | + | ||
| 38 | + | customElements.define('my-component', MyComponent); | |
| 39 | + | </script> | |
| 40 | + | </body> | |
| 41 | + | </html> | |
Neuer
Älter