diff --git a/docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx b/docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx index 981fb9b87dfea..e353b91685e94 100644 --- a/docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx +++ b/docs/02-app/02-api-reference/05-next-config-js/serverExternalPackages.mdx @@ -68,7 +68,6 @@ Next.js includes a [short list of popular packages](https://github.com/vercel/ne - `sharp` - `shiki` - `sqlite3` -- `tailwindcss` - `ts-node` - `typescript` - `vscode-oniguruma` diff --git a/docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx b/docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx index 5d6c608c0c58d..0750d548e0030 100644 --- a/docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx +++ b/docs/03-pages/02-api-reference/03-next-config-js/serverExternalPackages.mdx @@ -68,7 +68,6 @@ Next.js includes a [short list of popular packages](https://github.com/vercel/ne - `sharp` - `shiki` - `sqlite3` -- `tailwindcss` - `ts-node` - `typescript` - `vscode-oniguruma` diff --git a/packages/next/src/lib/server-external-packages.json b/packages/next/src/lib/server-external-packages.json index 610c13c4d2436..96612bc45f67d 100644 --- a/packages/next/src/lib/server-external-packages.json +++ b/packages/next/src/lib/server-external-packages.json @@ -49,7 +49,6 @@ "sharp", "shiki", "sqlite3", - "tailwindcss", "ts-node", "typescript", "vscode-oniguruma", diff --git a/test/e2e/app-dir/tailwind-css/app/layout.tsx b/test/e2e/app-dir/tailwind-css/app/layout.tsx new file mode 100644 index 0000000000000..c939c5c1f3882 --- /dev/null +++ b/test/e2e/app-dir/tailwind-css/app/layout.tsx @@ -0,0 +1,10 @@ +import 'tailwindcss/tailwind.css' +import { ReactNode } from 'react' + +export default function Root({ children }: { children: ReactNode }) { + return ( + + {children} + + ) +} diff --git a/test/e2e/app-dir/tailwind-css/app/page.tsx b/test/e2e/app-dir/tailwind-css/app/page.tsx new file mode 100644 index 0000000000000..53704f91b6689 --- /dev/null +++ b/test/e2e/app-dir/tailwind-css/app/page.tsx @@ -0,0 +1,63 @@ +export default function HomePage() { + return ( +
+
+

+ Welcome to{' '} + + Next.js! + +

+ +

+ Get started by editing{' '} + + pages/index.js + +

+ +
+ +

Documentation →

+

+ Find in-depth information about Next.js features and API. +

+ + + +

Learn →

+

+ Learn about Next.js in an interactive course with quizzes! +

+ + + +

Examples →

+

+ Discover and deploy boilerplate example Next.js projects. +

+ + + +

Deploy →

+

+ Instantly deploy your Next.js site to a public URL with Vercel. +

+ +
+
+
+ ) +} diff --git a/test/e2e/app-dir/tailwind-css/next.config.js b/test/e2e/app-dir/tailwind-css/next.config.js new file mode 100644 index 0000000000000..807126e4cf0bf --- /dev/null +++ b/test/e2e/app-dir/tailwind-css/next.config.js @@ -0,0 +1,6 @@ +/** + * @type {import('next').NextConfig} + */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/test/e2e/app-dir/tailwind-css/postcss.config.js b/test/e2e/app-dir/tailwind-css/postcss.config.js new file mode 100644 index 0000000000000..33ad091d26d8a --- /dev/null +++ b/test/e2e/app-dir/tailwind-css/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/test/e2e/app-dir/tailwind-css/tailwind-css.test.ts b/test/e2e/app-dir/tailwind-css/tailwind-css.test.ts new file mode 100644 index 0000000000000..3e8589b3b4f32 --- /dev/null +++ b/test/e2e/app-dir/tailwind-css/tailwind-css.test.ts @@ -0,0 +1,26 @@ +import { nextTestSetup } from 'e2e-utils' + +describe('tailwind-css', () => { + const { next } = nextTestSetup({ + files: __dirname, + dependencies: { + autoprefixer: '10.4.19', + postcss: '8.4.38', + tailwindcss: '3.4.4', + }, + }) + + it('works when importing tailwind/tailwind.css', async () => { + const browser = await next.browser('/') + try { + const text = await browser.elementByCss('.text-6xl').text() + expect(text).toMatch(/Welcome to/) + const cssBlue = await browser + .elementByCss('#test-link') + .getComputedCss('color') + expect(cssBlue).toBe('rgb(37, 99, 235)') + } finally { + await browser.close() + } + }) +}) diff --git a/test/e2e/app-dir/tailwind-css/tailwind.config.js b/test/e2e/app-dir/tailwind-css/tailwind.config.js new file mode 100644 index 0000000000000..b297e210951b2 --- /dev/null +++ b/test/e2e/app-dir/tailwind-css/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./app/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +} diff --git a/test/e2e/postcss-config-cjs/index.test.ts b/test/e2e/postcss-config-cjs/index.test.ts index 5cbbb4a3b50b9..8438f1275fcc9 100644 --- a/test/e2e/postcss-config-cjs/index.test.ts +++ b/test/e2e/postcss-config-cjs/index.test.ts @@ -1,34 +1,18 @@ -import { createNext, FileRef } from 'e2e-utils' +import { FileRef, nextTestSetup } from 'e2e-utils' import { join } from 'path' -import { NextInstance } from 'e2e-utils' -import webdriver from 'next-webdriver' describe('postcss-config-cjs', () => { - let next: NextInstance - - beforeAll(async () => { - next = await createNext({ - files: { - 'postcss.config.cjs': new FileRef( - join(__dirname, 'app/postcss.config.cjs') - ), - 'tailwind.config.cjs': new FileRef( - join(__dirname, 'app/tailwind.config.cjs') - ), - pages: new FileRef(join(__dirname, 'app/pages')), - }, - dependencies: { - tailwindcss: '2.2.19', - postcss: '8.3.5', - }, - }) + const { next } = nextTestSetup({ + files: new FileRef(join(__dirname, 'app')), + dependencies: { + tailwindcss: '2.2.19', + postcss: '8.3.5', + }, }) - afterAll(() => next.destroy()) it('works with postcss.config.cjs files', async () => { - let browser + let browser = await next.browser('/') try { - browser = await webdriver(next.url, '/') const text = await browser.elementByCss('.text-6xl').text() expect(text).toMatch(/Welcome to/) const cssBlue = await browser @@ -36,9 +20,7 @@ describe('postcss-config-cjs', () => { .getComputedCss('color') expect(cssBlue).toBe('rgb(37, 99, 235)') } finally { - if (browser) { - await browser.close() - } + await browser.close() } }) })