diff options
| -rw-r--r-- | .changeset/mean-tips-search.md | 5 | ||||
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 2 | ||||
| -rw-r--r-- | packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro | 2 | ||||
| -rw-r--r-- | packages/astro/e2e/tailwindcss.test.js | 7 | ||||
| -rw-r--r-- | packages/integrations/tailwind/README.md | 2 | ||||
| -rw-r--r-- | packages/integrations/tailwind/src/index.ts | 8 |
6 files changed, 17 insertions, 9 deletions
diff --git a/.changeset/mean-tips-search.md b/.changeset/mean-tips-search.md new file mode 100644 index 000000000..20372a04f --- /dev/null +++ b/.changeset/mean-tips-search.md @@ -0,0 +1,5 @@ +--- +'@astrojs/tailwind': patch +--- + +Re-enable autoprefixer in dev diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 79060699b..167927fb3 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -4,7 +4,7 @@ --- <button - class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" + class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" > <slot /> </button> diff --git a/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro b/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro index 6e0872173..56c3b4e41 100644 --- a/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro +++ b/packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro @@ -3,7 +3,7 @@ let { type = 'button' } = Astro.props; --- <button - class="py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" + class="appearance-none py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" {type} > <slot /> diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js index 49b7f3ba1..f8b120081 100644 --- a/packages/astro/e2e/tailwindcss.test.js +++ b/packages/astro/e2e/tailwindcss.test.js @@ -33,6 +33,13 @@ test.describe('Tailwind CSS', () => { const button = page.locator('button'); + await expect(button, 'should have appearance none').toHaveClass(/appearance-none/); + await expect(button, 'should have appearance: none').toHaveCSS('appearance', 'none'); + await expect(button, 'should have appearance-none with webkit prefix').toHaveCSS( + '-webkit-appearance', + 'none' + ); + await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/); await expect(button, 'should have background color').toHaveCSS( 'background-color', diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index 8ec23cc69..ef205fc87 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -68,7 +68,7 @@ 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. +[Autoprefixer](https://github.com/postcss/autoprefixer) is also set up automatically when working in dev mode, and for production builds, so Tailwind classes will work in older browsers. https://user-images.githubusercontent.com/4033662/169918388-8ed153b2-0ba0-4b24-b861-d6e1cc800b6c.mp4 diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts index 9106b672b..7a20f5921 100644 --- a/packages/integrations/tailwind/src/index.ts +++ b/packages/integrations/tailwind/src/index.ts @@ -86,7 +86,6 @@ async function getPostCssConfig( } async function getViteConfiguration( - isBuild: boolean, tailwindConfig: TailwindConfig, viteConfig: UserConfig ) { @@ -100,9 +99,7 @@ async function getViteConfiguration( postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : []; postcssPlugins.push(tailwindPlugin(tailwindConfig)); - if (isBuild) { - postcssPlugins.push(autoprefixerPlugin()); - } + postcssPlugins.push(autoprefixerPlugin()); return { css: { postcss: { @@ -140,7 +137,6 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt name: '@astrojs/tailwind', hooks: { 'astro:config:setup': async ({ - command, config, updateConfig, injectScript, @@ -166,7 +162,7 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt (userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir); updateConfig({ - vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite), + vite: await getViteConfiguration(tailwindConfig, config.vite), }); if (applyBaseStyles) { |