diff options
Diffstat (limited to 'examples/with-tailwindcss')
| -rw-r--r-- | examples/with-tailwindcss/package.json | 4 | ||||
| -rw-r--r-- | examples/with-tailwindcss/postcss.config.js | 6 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 5 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/pages/index.astro | 4 |
4 files changed, 12 insertions, 7 deletions
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index 7132c4391..a7ee6a2bf 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -10,7 +10,7 @@ }, "devDependencies": { "astro": "^0.21.0-next.1", - "autoprefixer": "^10.3.7", - "tailwindcss": "^2.2.17" + "autoprefixer": "^10.4.0", + "tailwindcss": "^2.2.19" } } diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index 12a703d90..7cffbeb55 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -1,6 +1,10 @@ +const path = require('path'); + module.exports = { plugins: { - tailwindcss: {}, + 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 64baa50ae..966c613aa 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -1,3 +1,6 @@ -<button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"> +--- +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> diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index 10f370ba3..28d5f3dec 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -8,9 +8,7 @@ import Button from '../components/Button.astro'; <html lang="en"> <head> <meta charset="UTF-8" /> - - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - + <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> |