timmy revisou este gist 10 months ago. Ir para a revisão
Sem alterações
timmy revisou este gist 10 months ago. Ir para a revisão
Sem alterações
timmy revisou este gist 1 year ago. Ir para a revisão
1 file changed, 41 insertions
lit_with_tailwind_css.html(arquivo criado)
| @@ -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> | |
Próximo
Anterior