diff options
3 files changed, 11 insertions, 0 deletions
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 000000000..bd30373c8 --- /dev/null +++ b/packages/astro/test/fixtures/tailwindcss/src/components/Complex.astro @@ -0,0 +1 @@ +<div id="complex" class="w-10/12 2xl:w-[80%]"></div> diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro index 8ef5b1715..30e666384 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"; <body> <Button>I’m a Tailwind Button!</Button> + <Complex /> </body> </html> diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js index d0aa61e93..93516b8cf 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 |