What to know about integrations?
Astro Integrations can change the function and look of your projects with a single line of code. Astro has several official integrations to choose from. Broadly speaking, integrations can help you:
- …bring your UI framework of choice (React, Svelte, Vue, etc.),
- …change Astro into SSR mode, fetching all data at request time,
- …transform and model content easier (with MDX and TailwindCSS among others).
Getting started with integrations is incredibly easy. For official integrations, the astro add CLI automates installations for you. Installing with NPM you run npx astro add mdx and npx astro add tailwind to get your project bootstrapped with both. Detailed instructions on how to install and/or troubleshoot can be found in: Using Integrations.
What happens under the hood?
The astro add CLI, installs the NPM packages and applies the integrations into your astro.config.* file. Additionally, for TailwindCSS it creates its own tailwind.config.cjs file with the necessary file extensions for HTML, MD, MDX and all supported UI frameworks.
Nice combo to have
When working with Markdown files (locally or remotely) and TailwindCSS, we’d also recommend installing the following dev dependencies:
- @tailwindcss/typography official plugin gives you default styles for your HTML that work straight out of the box (see installation).
- Automatic class sorting with Prettier with
prettierandprettier-plugin-tailwindcssjust makes sense to keep your utility classes in order (see installation).