|
| 1 | +# @astrojs/tailwind 💨 |
| 2 | + |
| 3 | +This **[Astro integration][astro-integration]** brings [Tailwind CSS](https://tailwindcss.com/) to your Astro project. |
| 4 | + |
| 5 | +Tailwind brings utility CSS classes for fonts, colors, layouts, transforms, and more to every Astro page or [UI component](https://docs.astro.build/en/core-concepts/framework-components/) in your project. It also includes extensive theming options for unifying your styles. |
| 6 | + |
| 7 | +## Installation |
| 8 | + |
| 9 | +There are two ways to add integrations to your project. Let's try the most convenient option first! |
| 10 | + |
| 11 | +### (experimental) `astro add` command |
| 12 | + |
| 13 | +Astro includes a CLI tool for adding first party integrations: `astro add`. This command will: |
| 14 | +1. (Optionally) Install all necessary dependencies and peer dependencies |
| 15 | +2. (Also optionally) Update your `astro.config.*` file to apply this integration |
| 16 | + |
| 17 | +To install `@astrojs/tailwind`, run the following from your project directory and follow the prompts: |
| 18 | + |
| 19 | +```sh |
| 20 | +# Using NPM |
| 21 | +npx astro add tailwind |
| 22 | +# Using Yarn |
| 23 | +yarn astro add tailwind |
| 24 | +# Using PNPM |
| 25 | +pnpx astro add tailwind |
| 26 | +``` |
| 27 | + |
| 28 | +If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below. |
| 29 | + |
| 30 | +### Install dependencies manually |
| 31 | + |
| 32 | +First, install the `@astrojs/tailwind` integration like so: |
| 33 | + |
| 34 | +``` |
| 35 | +npm install @astrojs/tailwind |
| 36 | +``` |
| 37 | + |
| 38 | +Then, apply this integration to your `astro.config.*` file using the `integrations` property: |
| 39 | + |
| 40 | +__astro.config.mjs__ |
| 41 | + |
| 42 | +```js |
| 43 | +import tailwind from '@astrojs/tailwind'; |
| 44 | + |
| 45 | +export default { |
| 46 | + // ... |
| 47 | + integrations: [tailwind()], |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +## Getting started |
| 52 | + |
| 53 | +Tailwind's utility classes should be ready-to-use with zero config, including [preprocessor setup](https://tailwindcss.com/docs/using-with-preprocessors) and [production optimization](https://tailwindcss.com/docs/optimizing-for-production). Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn all of the options and features available! |
| 54 | + |
| 55 | +## Configuration |
| 56 | + |
| 57 | +Have a [custom theme](https://tailwindcss.com/docs/configuration)? Try adding a `tailwind.config.(js|cjs|mjs)` file to the base of your project. You can also specify a custom config file using this integration's `config.path` option: |
| 58 | + |
| 59 | +__astro.config.mjs__ |
| 60 | + |
| 61 | +```js |
| 62 | +import tailwind from '@astrojs/tailwind'; |
| 63 | + |
| 64 | +export default { |
| 65 | + // ... |
| 66 | + integrations: [tailwind({ |
| 67 | + config: { path: './custom-config.js' }, |
| 68 | + })], |
| 69 | +} |
| 70 | +``` |
| 71 | + |
| 72 | +We will provide a `content` property to your config to enable Tailwind across all Astro files and [UI framework components](https://docs.astro.build/en/core-concepts/framework-components/). To remove this default, opt-out via the `config.applyAstroPreset` integration option: |
| 73 | + |
| 74 | +__astro.config.mjs__ |
| 75 | + |
| 76 | +```js |
| 77 | +export default { |
| 78 | + // ... |
| 79 | + integrations: [tailwind({ |
| 80 | + config: { applyAstroPreset: false }, |
| 81 | + })], |
| 82 | +} |
| 83 | +``` |
| 84 | + |
| 85 | +You can also check our [Astro Integration Documentation][astro-integration] for more on integrations. |
| 86 | + |
| 87 | +[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ |
| 88 | +[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components |
0 commit comments