Refactor tailwind integration setup (#5717)

Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · Jan 5, 2023 · a3a7fc9 · a3a7fc9
1 parent 63ef130
commit a3a7fc9
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/.changeset/thick-walls-smell.md b/.changeset/thick-walls-smell.md
@@ -0,0 +1,6 @@
+---
+'astro': major
+'@astrojs/tailwind': major
+---
+
+Remove `style.postcss` Astro config. Refactor tailwind integration to configure through `vite` instead. Also disables `autoprefixer` in dev.
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
@@ -30,7 +30,6 @@ const ASTRO_CONFIG_DEFAULTS: AstroUserConfig & any = {
  port: 3000,
  streaming: true,
  },
- style: { postcss: { options: {}, plugins: [] } },
  integrations: [],
  markdown: {
  drafts: false,
@@ -127,18 +126,6 @@ export const AstroConfigSchema = z.object({
  .optional()
  .default({})
  ),
- style: z
- .object({
- postcss: z
- .object({
- options: z.any(),
- plugins: z.array(z.any()),
- })
- .optional()
- .default(ASTRO_CONFIG_DEFAULTS.style.postcss),
- })
- .optional()
- .default({}),
  markdown: z
  .object({
  drafts: z.boolean().default(false),
@@ -300,21 +287,6 @@ export function createRelativeSchema(cmd: string, fileProtocolRoot: URL) {
  .optional()
  .default({})
  ),
- style: z
- .object({
- postcss: z.preprocess(
- (val) => resolvePostcssConfig(val, fileProtocolRoot),
- z
- .object({
- options: z.any(),
- plugins: z.array(z.any()),
- })
- .optional()
- .default(ASTRO_CONFIG_DEFAULTS.style.postcss)
- ),
- })
- .optional()
- .default({}),
  }).transform((config) => {
  // If the user changed outDir but not build.server, build.config, adjust so those
  // are relative to the outDir, as is the expected default.

diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts
@@ -150,9 +150,6 @@ export async function createVite(
  ignored: mode === 'build' ? ['**'] : undefined,
  },
  },
- css: {
- postcss: settings.config.style.postcss || {},
- },
  resolve: {
  alias: [
  {

diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md
@@ -68,6 +68,8 @@ export default defineConfig({
 
 When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project!
 
+[Autoprefixer](https://github.com/postcss/autoprefixer) is also setup automatically for production builds so Tailwind classes will work in older browsers.
+
 https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4
 
 ## Configuration

diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
@@ -66,6 +66,20 @@ async function getUserConfig(root: URL, configPath?: string, isRestart = false)
  }
 }
 
+function getViteConfiguration(isBuild: boolean, tailwindConfig: TailwindConfig) {
+ const postcssPlugins = [tailwindPlugin(tailwindConfig)];
+ if (isBuild) {
+ postcssPlugins.push(autoprefixerPlugin());
+ }
+ return {
+ css: {
+ postcss: {
+ plugins: postcssPlugins,
+ },
+ },
+ };
+}
+
 type TailwindOptions =
  | {
  config?: {
@@ -92,7 +106,14 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
  return {
  name: '@astrojs/tailwind',
  hooks: {
- 'astro:config:setup': async ({ config, injectScript, addWatchFile, isRestart }) => {
+ 'astro:config:setup': async ({
+ command,
+ config,
+ updateConfig,
+ injectScript,
+ addWatchFile,
+ isRestart,
+ }) => {
  // Inject the Tailwind postcss plugin
  const userConfig = await getUserConfig(config.root, customConfigPath, isRestart);
 
@@ -108,10 +129,9 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
  addWatchFile(userConfig.filePath);
  }
 
- const tailwindConfig: TailwindConfig =
+ const tailwindConfig =
  (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
- config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig));
- config.style.postcss.plugins.push(autoprefixerPlugin);
+ updateConfig({ vite: getViteConfiguration(command === 'build', tailwindConfig) });
 
  if (applyBaseStyles) {
  // Inject the Tailwind base import