diff --git a/packages/astro/test/fixtures/tailwindcss/src/components/Complex.astro b/packages/astro/test/fixtures/tailwindcss/src/components/Complex.astro new file mode 100644 index 0000000000..bd30373c8e --- /dev/null +++ b/packages/astro/test/fixtures/tailwindcss/src/components/Complex.astro @@ -0,0 +1 @@ +
diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro index 8ef5b17156..30e666384f 100644 --- a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro +++ b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro @@ -1,6 +1,8 @@ --- // Component Imports import Button from '../components/Button.astro'; +import Complex from '../components/Complex.astro'; + import "../styles/global.css"; // Full Astro Component Syntax: @@ -16,5 +18,6 @@ import "../styles/global.css"; + diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js index d0aa61e937..93516b8cfa 100644 --- a/packages/astro/test/tailwindcss.test.js +++ b/packages/astro/test/tailwindcss.test.js @@ -54,6 +54,13 @@ describe('Tailwind', () => { expect(button.hasClass('lg:py-3'), 'responsive class').to.be.true; expect(button.hasClass('font-[900]', 'arbitrary value')).to.be.true; }); + + it('handles complex classes in HTML', async () => { + const button = $('#complex'); + + expect(button.hasClass('w-10/12'), 'solidus').to.be.true; + expect(button.hasClass('2xl:w-[80%]'), 'complex class').to.be.true; + }); }); // with "build" handling CSS checking, the dev tests are mostly testing the paths resolve in dev