Fixing bug that could lose Tailwind's default presets (#3099)

* fixing bug that could lose Tailwind's default presets * updating integration README * chore: adding changeset * test: fixing the tailwind tests
withastro · Apr 13, 2022 · 254a8f3 · 254a8f3
1 parent b23f6b1
commit 254a8f3
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 33 deletions.
diff --git a/.changeset/tame-lamps-roll.md 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.
diff --git 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';
 		<title>Astro + TailwindCSS</title>
 	</head>
 
-	<body>
+	<body class="bg-dawn text-midnight">
 		<Button>I’m a Tailwind Button!</Button>
 		<Complex />
 	</body>

diff --git 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
@@ -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
@@ -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
@@ -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);