michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: autoprefixer on dev mode for tailwind plugin (#6002)

Browse source 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Roy Eden 2023-01-27 12:14:19 -03:00 committed by GitHub
parent 12c68343c0
commit 254eb21c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/mean-tips-search.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/tailwind': patch
---
Re-enable autoprefixer in dev

2
examples/with-tailwindcss/src/components/Button.astro
View file

@ -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>

2
packages/astro/e2e/fixtures/tailwindcss/src/components/Button.astro
View file

@ -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 />

7
packages/astro/e2e/tailwindcss.test.js
View file

@ -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',

2
packages/integrations/tailwind/README.md
View file

@ -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

8
packages/integrations/tailwind/src/index.ts
View file

@ -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) {