diff --git a/.changeset/tame-lamps-roll.md b/.changeset/tame-lamps-roll.md
new file mode 100644
index 000000000000..057a56190f7c
--- /dev/null
+++ b/.changeset/tame-lamps-roll.md
@@ -0,0 +1,7 @@
+---
+'@astrojs/tailwind': minor
+---
+
+Removes the `applyAstroPreset` integration option. Tailwind presets can be disabled directly from the Tailwind config file by including `presets: []`
+
+See the [Tailwind preset docs](https://tailwindcss.com/docs/presets#disabling-the-default-configuration) for more details.
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro
index 592f7a47d8de..d901b4233a9c 100644
--- a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro
+++ b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro
@@ -11,7 +11,7 @@ import Complex from '../components/Complex.astro';
Astro + TailwindCSS
-
+
diff --git a/packages/astro/test/fixtures/tailwindcss/tailwind.config.js b/packages/astro/test/fixtures/tailwindcss/tailwind.config.js
index a5716d3d610f..281a60f6feed 100644
--- a/packages/astro/test/fixtures/tailwindcss/tailwind.config.js
+++ b/packages/astro/test/fixtures/tailwindcss/tailwind.config.js
@@ -2,4 +2,13 @@ const path = require('path');
module.exports = {
content: [path.join(__dirname, 'src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}')],
+ theme: {
+ extend: {
+ colors: {
+ dawn: '#f3e9fa',
+ dusk: '#514375',
+ midnight: '#31274a',
+ }
+ }
+ }
};
diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js
index 762728310735..96a82572e9a8 100644
--- a/packages/astro/test/tailwindcss.test.js
+++ b/packages/astro/test/tailwindcss.test.js
@@ -41,6 +41,14 @@ describe('Tailwind', () => {
expect(bundledCSS, 'supports arbitrary value classes').to.match(
/\.font-\\\[900\\\]{font-weight:900}/
);
+
+ // custom theme colors were included
+ expect(bundledCSS, 'includes custom theme colors').to.match(
+ /\.text-midnight{/
+ );
+ expect(bundledCSS, 'includes custom theme colors').to.match(
+ /\.bg-dawn{/
+ );
});
it('maintains classes in HTML', async () => {
@@ -98,6 +106,14 @@ describe('Tailwind', () => {
// tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]`
expect(text, 'supports arbitrary value classes').to.match(/.font-\\[900\\]/);
+
+ // custom theme colors were included
+ expect(text, 'includes custom theme colors').to.match(
+ /\.text-midnight/
+ );
+ expect(text, 'includes custom theme colors').to.match(
+ /\.bg-dawn/
+ );
});
it('maintains classes in HTML', async () => {
diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
index e2f7548284e0..38eef5c86536 100644
--- a/packages/integrations/tailwind/README.md
+++ b/packages/integrations/tailwind/README.md
@@ -76,23 +76,6 @@ export default {
}
```
-### config.applyAstroPreset
-
-By default, when a custom `tailwind.config.js` file is used this integration will still append some configuration as a `preset` in the final configuration. This default configuration provides the correct `content` property so that Tailwind knows what files to scan in Astro projects (`src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}`).
-
-You can disable this by setting `config.applyAstroPreset` to false. 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:
-
-```js
-// astro.config.mjs
-export default {
- integrations: [tailwind({
- // Example: Disable adding Astro configuration as a preset.
- // Only useful if a custom tailwind.config.js file is used.
- config: { applyAstroPreset: false },
- })],
-}
-```
-
### config.applyBaseStyles
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:
diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
index 3efd8fde8e29..9a0275f33c82 100644
--- a/packages/integrations/tailwind/src/index.ts
+++ b/packages/integrations/tailwind/src/index.ts
@@ -14,6 +14,7 @@ function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
},
plugins: [],
content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
+ presets: undefined // enable Tailwind's default preset
});
}
@@ -37,12 +38,6 @@ type TailwindOptions =
* @default 'tailwind.config.js'
*/
path?: string;
- /**
- * Apply Astro's default Tailwind config as a preset
- * This is recommended to enable Tailwind across all components and Astro files
- * @default true
- */
- applyAstroPreset?: boolean;
/**
* Apply Tailwind's base styles
* Disabling this is useful when further customization of Tailwind styles
@@ -56,7 +51,6 @@ type TailwindOptions =
| undefined;
export default function tailwindIntegration(options: TailwindOptions): AstroIntegration {
- const applyAstroConfigPreset = options?.config?.applyAstroPreset ?? true;
const applyBaseStyles = options?.config?.applyBaseStyles ?? true;
const customConfigPath = options?.config?.path;
return {
@@ -76,14 +70,6 @@ export default function tailwindIntegration(options: TailwindOptions): AstroInte
const tailwindConfig: TailwindConfig =
(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
- if (applyAstroConfigPreset && userConfig?.value) {
- // apply Astro config as a preset to user config
- // this avoids merging or applying nested spread operators ourselves
- tailwindConfig.presets = [
- getDefaultTailwindConfig(config.srcDir),
- ...(tailwindConfig.presets || []),
- ];
- }
config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));
config.style.postcss.plugins.push(autoprefixerPlugin);