Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[turbopack] tailwindcss not working with --turbo on dev #67513

Closed
RubenSmn opened this issue Jul 6, 2024 · 3 comments
Closed

[turbopack] tailwindcss not working with --turbo on dev #67513

RubenSmn opened this issue Jul 6, 2024 · 3 comments
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. Turbopack Related to Turbopack with Next.js.

Comments

@RubenSmn
Copy link

RubenSmn commented Jul 6, 2024

Link to the code that reproduces this issue

https://github.com/RubenSmn/turbopack-tailwindcss-dev-bug

To Reproduce

  1. pnpx create-next-app
  2. accept all defaults
  3. add --turbo to next dev in package.json like mentioned in add turbopack to existing project
  4. pnpm run dev
  5. go to the server and see that tailwindcss class styles are not applied

or

  1. pnpx create-next-app --example with-turbopack
  2. add tailwindcss following the Install Tailwind CSS with Next.js
    guide
    (all the way to step 6)
  3. pnpm run dev
  4. go to the server and see that tailwindcss class styles are not applied

Current vs. Expected behavior

Current Behavior
The tailwindcss styles from the classes, e.g. (font-bold, underline), are not applied when running next dev with the --turbo flag. When running the dev server without the turbo flag all styles are applied correctly.

Expected Behavior
The styles are applied when running next dev with the --turbo flag.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #123~20.04.1-Ubuntu SMP Wed Jun 12 17:33:13 UTC 2024
  Available memory (MB): 15733
  Available CPU cores: 8
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.6.12
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2

  autoprefixer: ^10.4.19
  postcss: ^8.4.39
  tailwindcss: ^3.4.4

Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

@RubenSmn RubenSmn added the bug Issue was opened via the bug report template. label Jul 6, 2024
@github-actions github-actions bot added the Turbopack Related to Turbopack with Next.js. label Jul 6, 2024
@N1ve5h
Copy link

N1ve5h commented Jul 6, 2024

@RubenSmn I created a fork with the fix. The issue was that autoprefixer was not listed in your package.json nor in pnpm-lock.yaml

@mirasayon
Copy link
Contributor

I have no idea how it happened that this doesn't work for you. But I copied your repository and everything works for me without any problems. It works with pnpm too:

Screenshot 2024-07-07 053051

@timneutkens timneutkens added the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label Jul 12, 2024
@timneutkens
Copy link
Member

Going to close this as @N1ve5h's reply is correct 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. Turbopack Related to Turbopack with Next.js.
Projects
None yet
Development

No branches or pull requests

4 participants