diff options
| -rw-r--r-- | .changeset/beige-schools-hang.md | 24 | ||||
| -rw-r--r-- | .changeset/real-spies-pretend.md | 12 | ||||
| -rw-r--r-- | packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs | 4 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-scripts/astro.config.mjs | 4 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/middleware-tailwind/astro.config.mjs | 4 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts | 4 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/tailwindcss/astro.config.mjs | 4 | ||||
| -rw-r--r-- | packages/integrations/tailwind/README.md | 18 | ||||
| -rw-r--r-- | packages/integrations/tailwind/src/index.ts | 38 |
9 files changed, 64 insertions, 48 deletions
diff --git a/.changeset/beige-schools-hang.md b/.changeset/beige-schools-hang.md new file mode 100644 index 000000000..4b964f182 --- /dev/null +++ b/.changeset/beige-schools-hang.md @@ -0,0 +1,24 @@ +--- +'@astrojs/tailwind': major +--- + +Rename options `config.path` to `configFile`, and `config.applyBaseStyles` to `applyBaseStyles`. If you are using these options, you need to migrate to the new names. + +```diff +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import tailwind from '@astrojs/tailwind'; + +export default defineConfig({ + integrations: [ + tailwind({ +- config: { +- path: '...', +- applyBaseStyles: true, +- }, ++ configFile: '...', ++ applyBaseStyles: true, + }), + ], +}); +``` diff --git a/.changeset/real-spies-pretend.md b/.changeset/real-spies-pretend.md index 009585c7c..b38af662c 100644 --- a/.changeset/real-spies-pretend.md +++ b/.changeset/real-spies-pretend.md @@ -2,9 +2,12 @@ '@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 the `tailwindcss` PostCSS plugin load its config file itself. This changes the Tailwind config loading behaviour where it is loaded from `process.cwd()` instead of the project `root`. + +If your Tailwind config file is not located in the current working directory, you will need to configure the integration's `configFile` option to load from a specific path: ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; import { fileURLToPath } from 'url'; @@ -12,17 +15,16 @@ 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.cjs', import.meta.url)), }), ], }); ``` -This change also requires a Tailwind config file to exist in your project as Astro's fallback value is no longer provided. It is set up automatically during `astro add tailwind`, but you can also manually create a `tailwind.config.cjs` file in your project root: +This change also requires a Tailwind config file to exist in your project as a fallback config is no longer provided. It is set up automatically during `astro add tailwind`, but if it does not exist, you can manually create a `tailwind.config.cjs` file in your project root: ```js +// tailwind.config.cjs /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], diff --git a/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs b/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs index 681ec1bc2..1db9d12bb 100644 --- a/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs +++ b/packages/astro/e2e/fixtures/tailwindcss/astro.config.mjs @@ -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: { diff --git a/packages/astro/test/fixtures/astro-scripts/astro.config.mjs b/packages/astro/test/fixtures/astro-scripts/astro.config.mjs index 8e44acd75..f34407295 100644 --- a/packages/astro/test/fixtures/astro-scripts/astro.config.mjs +++ b/packages/astro/test/fixtures/astro-scripts/astro.config.mjs @@ -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)), }), ], }); diff --git a/packages/astro/test/fixtures/middleware-tailwind/astro.config.mjs b/packages/astro/test/fixtures/middleware-tailwind/astro.config.mjs index 73ece68e0..ebb824269 100644 --- a/packages/astro/test/fixtures/middleware-tailwind/astro.config.mjs +++ b/packages/astro/test/fixtures/middleware-tailwind/astro.config.mjs @@ -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)), }), ], }); diff --git a/packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts b/packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts index 936426736..5b16f3f9b 100644 --- a/packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts +++ b/packages/astro/test/fixtures/tailwindcss-ts/astro.config.ts @@ -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)), }), ], }); diff --git a/packages/astro/test/fixtures/tailwindcss/astro.config.mjs b/packages/astro/test/fixtures/tailwindcss/astro.config.mjs index 390bd3b73..6b584904c 100644 --- a/packages/astro/test/fixtures/tailwindcss/astro.config.mjs +++ b/packages/astro/test/fixtures/tailwindcss/astro.config.mjs @@ -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(), ], 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, })], }); ``` diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index d489c0196..df0f01723 100644 --- a/packages/integrations/tailwind/src/index.ts +++ b/packages/integrations/tailwind/src/index.ts @@ -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: { |