diff options
Diffstat (limited to 'examples/with-tailwindcss/src')
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 19 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/layouts/main.astro | 16 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/pages/index.astro | 25 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/pages/markdown-page.md | 16 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/styles/global.css | 1 |
5 files changed, 77 insertions, 0 deletions
diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro new file mode 100644 index 000000000..167927fb3 --- /dev/null +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -0,0 +1,19 @@ +--- +// Click button, get confetti! +// Styled by Tailwind :) +--- + +<button + class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" +> + <slot /> +</button> + +<script> + import confetti from 'canvas-confetti'; + const button = document.body.querySelector('button'); + + if (button) { + button.addEventListener('click', () => confetti()); + } +</script> diff --git a/examples/with-tailwindcss/src/layouts/main.astro b/examples/with-tailwindcss/src/layouts/main.astro new file mode 100644 index 000000000..0a9423176 --- /dev/null +++ b/examples/with-tailwindcss/src/layouts/main.astro @@ -0,0 +1,16 @@ +--- +import '../styles/global.css'; +const { content } = Astro.props; +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <title>{content.title}</title> + </head> + <body> + <slot /> + </body> +</html> diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro new file mode 100644 index 000000000..6350a3330 --- /dev/null +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -0,0 +1,25 @@ +--- +import '../styles/global.css'; +// Component Imports +import Button from '../components/Button.astro'; + +// Full Astro Component Syntax: +// https://docs.astro.build/basics/astro-components/ +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="generator" content={Astro.generator} /> + <title>Astro + TailwindCSS</title> + </head> + + <body> + <div class="grid place-items-center h-screen content-center"> + <Button>Tailwind Button in Astro!</Button> + <a href="/markdown-page" class="p-4 underline">Markdown is also supported...</a> + </div> + </body> +</html> diff --git a/examples/with-tailwindcss/src/pages/markdown-page.md b/examples/with-tailwindcss/src/pages/markdown-page.md new file mode 100644 index 000000000..de11d381b --- /dev/null +++ b/examples/with-tailwindcss/src/pages/markdown-page.md @@ -0,0 +1,16 @@ +--- +title: 'Markdown + Tailwind' +layout: ../layouts/main.astro +--- + +<div class="grid place-items-center h-screen content-center"> + <div class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md"> + Tailwind classes also work in Markdown! + </div> + <a + href="/" + class="p-4 underline hover:text-purple-500 transition-colors ease-in-out duration-200" + > + Go home + </a> +</div> diff --git a/examples/with-tailwindcss/src/styles/global.css b/examples/with-tailwindcss/src/styles/global.css new file mode 100644 index 000000000..d4b507858 --- /dev/null +++ b/examples/with-tailwindcss/src/styles/global.css @@ -0,0 +1 @@ +@import 'tailwindcss'; |