test(turbopack): migrate tailwind test cases from next-dev

test/integration/css-fixtures/with-tailwindcss/pages/index.js

@@ -1,3 +1,16 @@
 export default function Home() {
-  return <div />
+  return (
+    <div>
+      <footer className="flex h-24 w-full items-center justify-center border-t">
+        <a
+          className="flex items-center justify-center gap-2"
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+        </a>
+      </footer>
+    </div>
+  )
 }

test/integration/css-fixtures/with-tailwindcss/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

test/integration/css-fixtures/with-tailwindcss/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

test/integration/css/test/basic-tailwind.test.js

@@ -0,0 +1,47 @@
+/* eslint-env jest */
+import { createNext, FileRef } from 'e2e-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+const fixturesDir = join(__dirname, '../..', 'css-fixtures')
+
+//[NOTE]: This test is migrated from next-dev integration tests for turbopack,
+//Extracted into a single test file so we can put this in blocking tests for turbopack (turbopack-tests-manifests.js)
+describe('Render css with tailwind', () => {
+  const appDir = join(fixturesDir, 'with-tailwindcss')
+
+  let next
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(join(appDir, 'pages')),
+        styles: new FileRef(join(appDir, 'styles')),
+        'postcss.config.js': new FileRef(join(appDir, 'postcss.config.js')),
+        'tailwind.config.js': new FileRef(join(appDir, 'tailwind.config.js')),
+      },
+      dependencies: {
+        postcss: '^8.4.29',
+        tailwindcss: '^3.3.3',
+        autoprefixer: '^10.4.13',
+      },
+    })
+  })
+
+  afterAll(() => next?.destroy())
+
+  it('should apply global styles', async () => {
+    let browser
+    try {
+      browser = await webdriver(next.url, '/')
+
+      const alignItems = await browser.eval(
+        `window.getComputedStyle(document.querySelector('footer')).alignItems`
+      )
+      expect(alignItems).toMatchInlineSnapshot(`"center"`)
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+})

test/turbopack-tests-manifest.js

@@ -22,6 +22,7 @@ const enabledTests = [
   'test/e2e/undici-fetch/index.test.ts',
   'test/integration/bigint/test/index.test.js',
   'test/e2e/styled-jsx/index.test.ts',
+  'test/integration/css/test/basic-tailwind.test.js',
   // TODO: re-enable once the logging is aligned
   // 'test/integration/middleware-basic/test/index.test.js',
 ]