diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2022-03-18 15:35:45 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-03-18 15:35:45 -0700 |
| commit | 6386c14d00d1d820804f0ee5b1424e73c049fe83 (patch) | |
| tree | 3015e834e1d84100fd0871f6a55479bed61c0c14 /examples/with-tailwindcss | |
| parent | 0f376a7c52d3a22ff32b33e0afc34dd306ed70c4 (diff) | |
| download | astro-6386c14d00d1d820804f0ee5b1424e73c049fe83.tar.gz astro-6386c14d00d1d820804f0ee5b1424e73c049fe83.tar.zst astro-6386c14d00d1d820804f0ee5b1424e73c049fe83.zip | |
Astro Integration System (#2820)
* update examples
* add initial integrations
* update tests
* update astro
* update ci
* get final tests working
* update injectelement todo
* update ben code review
* respond to final code review feedback
Diffstat (limited to 'examples/with-tailwindcss')
| -rw-r--r-- | examples/with-tailwindcss/astro.config.mjs | 4 | ||||
| -rw-r--r-- | examples/with-tailwindcss/package.json | 3 | ||||
| -rw-r--r-- | examples/with-tailwindcss/postcss.config.js | 10 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 13 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/pages/index.astro | 5 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/styles/global.css | 3 | ||||
| -rw-r--r-- | examples/with-tailwindcss/tailwind.config.js | 3 |
7 files changed, 14 insertions, 27 deletions
diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index a024b64b4..4ad396807 100644 --- a/examples/with-tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs @@ -1,7 +1,7 @@ import { defineConfig } from 'astro/config'; +import tailwind from '@astrojs/tailwind'; // https://astro.build/config export default defineConfig({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + integrations: [tailwind()], }); diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index b1060f02e..8e4009f18 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -9,9 +9,10 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", + "@astrojs/tailwind": "^0.0.1", "astro": "^0.24.3", "autoprefixer": "^10.4.4", + "canvas-confetti": "^1.5.1", "postcss": "^8.4.12", "tailwindcss": "^3.0.23" } diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js deleted file mode 100644 index c3a002bfe..000000000 --- a/examples/with-tailwindcss/postcss.config.js +++ /dev/null @@ -1,10 +0,0 @@ -const path = require('path'); - -module.exports = { - plugins: { - tailwindcss: { - config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs! - }, - autoprefixer: {}, - }, -}; diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 5e241c44f..11c605a2f 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -1,10 +1,11 @@ --- -let { type = 'button' } = Astro.props; +// Click button, get confetti! +// Styled by Tailwind :) --- - -<button - class="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" - {type} -> +<button class="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 hoist> + import confetti from 'canvas-confetti'; + document.body.querySelector('button').addEventListener("click", () => confetti()); +</script>
\ No newline at end of file diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index ba346e6c2..743653a95 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -1,7 +1,6 @@ --- // Component Imports import Button from '../components/Button.astro'; -import '../styles/global.css'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ @@ -15,6 +14,8 @@ import '../styles/global.css'; </head> <body> - <Button>I’m a Tailwind Button!</Button> + <div class="grid place-items-center h-screen"> + <Button>Click Me!</Button> + </div> </body> </html> diff --git a/examples/with-tailwindcss/src/styles/global.css b/examples/with-tailwindcss/src/styles/global.css deleted file mode 100644 index b5c61c956..000000000 --- a/examples/with-tailwindcss/src/styles/global.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js deleted file mode 100644 index 30b9aff01..000000000 --- a/examples/with-tailwindcss/tailwind.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], -}; |