npm create astro@latest
with sample files, typescript strictnpx astro add tailwind
, setapplyBaseStyles
tofalse
- Add
/src/global.css
and import it in/src/pages/index.astro
- Add the following contents to global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background: red;
h1 {
font-style: italic;
}
}
- I tried messing around with the vite config, but no luck.
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import postcssImport from "postcss-import";
import postcssNested from "postcss-nested";
import tailwindcss from "tailwindcss";
import tailwindcssNesting from "tailwindcss/nesting";
// https://astro.build/config
export default defineConfig({
integrations: [tailwind({ applyBaseStyles: false })],
vite: {
css: {
postcss: {
plugins: [
postcssImport(),
postcssNested(),
tailwindcss(),
tailwindcssNesting(),
],
},
},
},
});