diff options
| -rw-r--r-- | .changeset/tasty-zoos-wink.md | 5 | ||||
| -rw-r--r-- | packages/integrations/tailwind/README.md | 13 | ||||
| -rw-r--r-- | packages/integrations/tailwind/src/index.ts | 15 |
3 files changed, 31 insertions, 2 deletions
diff --git a/.changeset/tasty-zoos-wink.md b/.changeset/tasty-zoos-wink.md new file mode 100644 index 000000000..1b144f9c0 --- /dev/null +++ b/.changeset/tasty-zoos-wink.md @@ -0,0 +1,5 @@ +--- +'@astrojs/tailwind': patch +--- + +Adds an option to opt-out of the default base styles for the Tailwind integration diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index 1cf730f7a..d0ab7d97d 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -82,6 +82,19 @@ export default { } ``` +We will include `@tailwind` directives for each of Tailwind's layers to enable Tailwind styles by default. If you need to customize this behavior, with Tailwind's [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer) for example, opt-out via the `config.applyBaseStyles` integration option: + +__astro.config.mjs__ + +```js +export default { + // ... + integrations: [tailwind({ + config: { applyBaseStyles: false }, + })], +} +``` + You can also check our [Astro Integration Documentation][astro-integration] for more on integrations. [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index bb5a4ade3..3bdd65011 100644 --- a/packages/integrations/tailwind/src/index.ts +++ b/packages/integrations/tailwind/src/index.ts @@ -43,12 +43,21 @@ type TailwindOptions = * @default true */ applyAstroPreset?: boolean; + /** + * 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; 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 { name: '@astrojs/tailwind', @@ -71,8 +80,10 @@ export default function tailwindIntegration(options: TailwindOptions): AstroInte config.styleOptions.postcss.plugins.push(tailwindPlugin(tailwindConfig)); config.styleOptions.postcss.plugins.push(autoprefixerPlugin); - // Inject the Tailwind base import - injectScript('page-ssr', `import '@astrojs/tailwind/base.css';`); + if (applyBaseStyles) { + // Inject the Tailwind base import + injectScript('page-ssr', `import '@astrojs/tailwind/base.css';`); + } }, }, }; |