diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx index ded5c53be003d..3ae091bc9b15d 100644 --- a/src/content/docs/en/guides/styling.mdx +++ b/src/content/docs/en/guides/styling.mdx @@ -429,9 +429,22 @@ import "../components/make-it-purple.css" ## CSS Integrations -Astro comes with support for adding popular CSS libraries, tools and frameworks to your project like [Tailwind][tailwind] and more! +Astro comes with support for adding popular CSS libraries, tools and frameworks to your project like [Tailwind](https://tailwindcss.com) and more! -📚 See the [Integrations Guide](/en/guides/integrations-guide/) for instructions on installing, importing and configuring these integrations. +### Tailwind + +To use Taiwind in your project, install the offical [Astro Tailwind integration][tailwind] using the `astro add` command for your package manager: + +```sh +# Using NPM +npx astro add tailwind +# Using Yarn +yarn astro add tailwind +# Using PNPM +pnpm astro add tailwind +``` + +📚 See the [Integrations Guide](/en/guides/integrations-guide/) for instructions on installing, importing and configuring Astro integrations. ## CSS Preprocessors @@ -585,7 +598,7 @@ See [Vite's docs](https://vitejs.dev/guide/assets.html#importing-asset-as-url) f [sass]: https://sass-lang.com/ [stylus]: https://stylus-lang.com/ [svelte-style]: https://svelte.dev/docs#component-format-style -[tailwind]: https://github.com/withastro/astro/tree/main/packages/integrations/tailwind +[tailwind]: /en/guides/integrations-guide/tailwind/ [vite-preprocessors]: https://vitejs.dev/guide/features.html#css-pre-processors [vue-css-modules]: https://vue-loader.vuejs.org/guide/css-modules.html [vue-scoped]: https://vue-loader.vuejs.org/guide/scoped-css.html