summaryrefslogtreecommitdiff
path: root/packages/integrations/tailwind/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/tailwind/README.md')
-rw-r--r--packages/integrations/tailwind/README.md18
1 files changed, 11 insertions, 7 deletions
diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index cfaef2495..f0595dbe5 100644
--- a/packages/integrations/tailwind/README.md
+++ b/packages/integrations/tailwind/README.md
@@ -84,9 +84,11 @@ If it isn't there, you add your own `tailwind.config.(js|cjs|mjs)` file to the r
The Astro Tailwind integration handles the communication between Astro and Tailwind and it has its own options. Change these in the `astro.config.mjs` file (_not_ the Tailwind configuration file) which is where your project's integration settings live.
-#### config.path
+#### configFile
+
+Previously known as `config.path` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
-If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs)`, specify that file's location using this integration's `config.path` option. If `config.path` is relative, it will be resolved relative to the root.
+If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs)`, specify that file's location using this integration's `configFile` option. If `configFile` is relative, it will be resolved relative to the current working directory.
> **Warning**
> Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
@@ -100,14 +102,16 @@ import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind({
// Example: Provide a custom path to a Tailwind config file
- config: { path: './custom-config.cjs' },
+ configFile: './custom-config.cjs',
})],
});
```
-#### config.applyBaseStyles
+#### applyBaseStyles
+
+Previously known as `config.applyBaseStyles` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
- By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:
+By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:
```css
/* The integration's default injected base.css file */
@@ -116,7 +120,7 @@ export default defineConfig({
@tailwind utilities;
```
-To disable this default behavior, set `config.applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
+To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
__`astro.config.mjs`__
@@ -127,7 +131,7 @@ export default defineConfig({
integrations: [tailwind({
// Example: Disable injecting a basic `base.css` import on every page.
// Useful if you need to define and/or import your own custom `base.css`.
- config: { applyBaseStyles: false },
+ applyBaseStyles: false,
})],
});
```