diff options
Diffstat (limited to 'examples/with-tailwindcss')
| -rw-r--r-- | examples/with-tailwindcss/astro.config.mjs | 4 | ||||
| -rw-r--r-- | examples/with-tailwindcss/postcss.config.js | 12 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 8 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/pages/index.astro | 19 | ||||
| -rw-r--r-- | examples/with-tailwindcss/tailwind.config.js | 2 |
5 files changed, 25 insertions, 20 deletions
diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/with-tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index 7cffbeb55..c3a002bfe 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -1,10 +1,10 @@ const path = require('path'); module.exports = { - plugins: { - tailwindcss: { - config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs! - }, - autoprefixer: {}, - }, + 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 966c613aa..5e241c44f 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -1,6 +1,10 @@ --- let { type = 'button' } = Astro.props; --- -<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={type}> - <slot /> + +<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} +> + <slot /> </button> diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index 28d5f3dec..07262b870 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -5,15 +5,16 @@ import Button from '../components/Button.astro'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="UTF-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>Astro + TailwindCSS</title> - <link rel="stylesheet" type="text/css" href={Astro.resolve("../styles/global.css")}> - </head> + <head> + <meta charset="UTF-8" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>Astro + TailwindCSS</title> + <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} /> + </head> - <body> - <Button>I’m a Tailwind Button!</Button> - </body> + <body> + <Button>I’m a Tailwind Button!</Button> + </body> </html> diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js index 627a00ab2..30b9aff01 100644 --- a/examples/with-tailwindcss/tailwind.config.js +++ b/examples/with-tailwindcss/tailwind.config.js @@ -1,3 +1,3 @@ module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], + content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], }; |