Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename tailwind integration options #7391

Merged
merged 4 commits into from
Jun 15, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/beige-schools-hang.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/tailwind': major
---

Rename options `config.path` to `configFile`, and `config.applyBaseStyles` to `applyBaseStyles`
6 changes: 2 additions & 4 deletions .changeset/real-spies-pretend.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
'@astrojs/tailwind': major
---

Let tailwind postcss plugin load its config file itself. This changes the `tailwind.config.js` loading behaviour where Tailwind would load the config file from `process.cwd()` instead of the project `root`. You can configure the integration's `config.path` option to load from a specific path instead.
Let tailwind postcss plugin load its config file itself. This changes the `tailwind.config.js` loading behaviour where Tailwind would load the config file from `process.cwd()` instead of the project `root`. You can configure the integration's `configFile` option to load from a specific path instead.

```js
import { defineConfig } from 'astro/config';
Expand All @@ -12,9 +12,7 @@ import { fileURLToPath } from 'url';
export default defineConfig({
integrations: [
tailwind({
config: {
path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
},
configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
}),
],
});
Expand Down
4 changes: 1 addition & 3 deletions packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import { fileURLToPath } from 'url';
export default defineConfig({
integrations: [
tailwind({
config: {
path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
},
configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
}),
],
vite: {
Expand Down
4 changes: 1 addition & 3 deletions packages/astro/test/fixtures/astro-scripts/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import { fileURLToPath } from 'url';
export default defineConfig({
integrations: [
tailwind({
config: {
path: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
},
configFile: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
}),
],
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import { fileURLToPath } from 'url';
export default defineConfig({
integrations: [
tailwind({
config: {
path: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
},
configFile: fileURLToPath(new URL('./tailwind.config.cjs', import.meta.url)),
}),
],
});
4 changes: 1 addition & 3 deletions packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import { fileURLToPath } from 'url';
export default defineConfig({
integrations: [
tailwind({
config: {
path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
},
configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
}),
],
});
4 changes: 1 addition & 3 deletions packages/astro/test/fixtures/tailwindcss/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import { fileURLToPath } from 'url';
export default defineConfig({
integrations: [
tailwind({
config: {
path: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
},
configFile: fileURLToPath(new URL('./tailwind.config.js', import.meta.url)),
}),
mdx(),
],
Expand Down
14 changes: 7 additions & 7 deletions packages/integrations/tailwind/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@ 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
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

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.
Expand All @@ -100,14 +100,14 @@ 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
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

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 */
Expand All @@ -116,7 +116,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`__

Expand All @@ -127,7 +127,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,
})],
});
```
Expand Down
38 changes: 17 additions & 21 deletions packages/integrations/tailwind/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,29 +46,25 @@ async function getViteConfiguration(
};
}

type TailwindOptions =
| {
config?: {
/**
* Path to your tailwind config file
* @default 'tailwind.config.js'
*/
path?: string;
/**
* Apply Tailwind's base styles
* Disabling this is useful when further customization of Tailwind styles
* and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
* for more details on directives and customization.
* @default true
*/
applyBaseStyles?: boolean;
};
}
| undefined;
type TailwindOptions = {
/**
* Path to your tailwind config file
* @default 'tailwind.config.js'
*/
configFile?: string;
/**
* Apply Tailwind's base styles
* Disabling this is useful when further customization of Tailwind styles
* and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
* for more details on directives and customization.
* @default true
*/
applyBaseStyles?: boolean;
};

export default function tailwindIntegration(options?: TailwindOptions): AstroIntegration {
const applyBaseStyles = options?.config?.applyBaseStyles ?? true;
const customConfigPath = options?.config?.path;
const applyBaseStyles = options?.applyBaseStyles ?? true;
const customConfigPath = options?.configFile;
return {
name: '@astrojs/tailwind',
hooks: {
Expand Down