timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 1 year ago. Vai alla revisione
1 file changed, 41 insertions
lit_with_tailwind_css.html(file creato)
| @@ -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> | |
Più nuovi
Più vecchi