import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind()],
});


/astro.config.mjs

@example/minimal

/package.json

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


/postcss.config.cjs

module.exports = {
  content: ['./src/**/*.{astro,md,mdx}'],
  theme: {
    extend: {
      width: {
        'square-diagonal': (Math.sqrt(2) * 100).toFixed(2) + '%',
      },
    },
  },
  plugins: [],
}


/tailwind.config.cjs

/tsconfig.json

---
import '../styles/tailwind.css'
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pro Tailwind Tutorials</title>
  </head>
  <body>
    <slot />
  </body>
</html>


/base.astro

---
import Layout from '../layouts/base.astro'
---

<Layout>
  <div class="max-w 3xl mx-auto px-4 mt-12">
    <h1>Pro Tailwind Tutorials</h1>
    <ul class="mt-8">
      <li>
        <a class="underline hover:text-indigo-600" href="/tutorials/ribbon-banner">Ribbon Banner</a>
      </li>
    </ul>
  </div>
</Layout>


Notes