Skip to content

Commit

Permalink
Feat: support tailwind config files (#2831)
Browse files Browse the repository at this point in the history
* feat: support custom tailwind config files

* fix: make config options optional

* feat: use existing utilities to resolve config path

* deps: add @proload/core to tailwind integration

* deps: update pnpm lock

* chore: clarify config docs

* refactor: extract user config fetch to helper

* refactor: rename function and function options

* refactor: throw error on bad custom config path

* deps: move @proload/core to regular deps

* chore: add changeset

* fix: apply astro preset when user config exists

* fix: use resolveConfig to preserve defaults
  • Loading branch information
bholmesdev authored Mar 21, 2022
1 parent 981e2a8 commit 5315c3f
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/rude-panthers-tease.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/tailwind': patch
---

Add support for tailwind config files. These can either be a standard `tailwind.config.js|cjs|mjs`, or a custom filename as specified in your integration config.
1 change: 1 addition & 0 deletions packages/integrations/tailwind/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"dependencies": {
"tailwindcss": "^3.0.23",
"autoprefixer": "^10.4.4",
"@proload/core": "^0.2.2",
"postcss": "^8.4.12"
},
"devDependencies": {
Expand Down
60 changes: 54 additions & 6 deletions packages/integrations/tailwind/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,73 @@ import type { AstroIntegration } from 'astro';
import { fileURLToPath } from 'url';
import path from 'path';
import tailwindPlugin from 'tailwindcss';
import type { TailwindConfig } from 'tailwindcss/tailwind-config';
import resolveConfig from 'tailwindcss/resolveConfig.js';
import autoprefixerPlugin from 'autoprefixer';
import load from '@proload/core';

function getDefaultTailwindConfig(srcUrl: URL) {
return {
function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
return resolveConfig({
theme: {
extend: {},
},
plugins: [],
content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
};
});
}

async function getUserConfig(projectRoot: URL, configPath?: string) {
const resolvedProjectRoot = fileURLToPath(projectRoot);
let userConfigPath: string | undefined;

if (configPath) {
const configPathWithLeadingSlash = /^\.*\//.test(configPath) ? configPath : `./${configPath}`;
userConfigPath = fileURLToPath(new URL(configPathWithLeadingSlash, projectRoot));
}

return await load('tailwind', { mustExist: false, cwd: resolvedProjectRoot, filePath: userConfigPath });
}

export default function (): AstroIntegration {
type TailwindOptions =
| {
config?: {
/**
* Path to your tailwind config file
* @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;
};
}
| undefined;

export default function tailwindIntegration(options: TailwindOptions): AstroIntegration {
const applyAstroConfigPreset = options?.config?.applyAstroPreset ?? true;
const customConfigPath = options?.config?.path;
return {
name: '@astrojs/tailwind',
hooks: {
'astro:config:setup': ({ config, injectScript }) => {
'astro:config:setup': async ({ config, injectScript }) => {
// Inject the Tailwind postcss plugin
config.styleOptions.postcss.plugins.push(tailwindPlugin(getDefaultTailwindConfig(config.src)));
const userConfig = await getUserConfig(config.projectRoot, customConfigPath);

if (customConfigPath && !userConfig?.value) {
throw new Error(`Could not find a Tailwind config at ${JSON.stringify(customConfigPath)}. Does the file exist?`);
}

const tailwindConfig: TailwindConfig = (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.src);
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.src), ...(tailwindConfig.presets || [])];
}

config.styleOptions.postcss.plugins.push(tailwindPlugin(tailwindConfig));
config.styleOptions.postcss.plugins.push(autoprefixerPlugin);

// Inject the Tailwind base import
Expand Down
2 changes: 2 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 5315c3f

Please sign in to comment.