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.

Sign up for GitHub

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

Jump to bottom

Using Tailwindcss without build process - Nextjs #842

Closed
yensubldg opened this issue Jul 23, 2022 · 4 comments
Closed

Using Tailwindcss without build process - Nextjs #842

yensubldg opened this issue Jul 23, 2022 · 4 comments
Labels
enhancement New feature or request

Comments

@yensubldg
Copy link

What is the problem this feature will solve?

Can use tailwindcss with Nextjs without the Tailwindcss CLI build process

What is the feature you are proposing to solve the problem?

Same as npm, yarn with script "dev"

What alternatives have you considered?

No response
@yensubldg yensubldg added the enhancement New feature or request label Jul 23, 2022
@rgoomar
Copy link
Contributor

rgoomar commented Jul 24, 2022 •
edited
Loading

@yensubldg Do you have an example of what behavior you're looking for? Like what works with npm or yarn that isn't the intended behavior with bun?

If you're looking for a similar workflow to what is described in that doc you linked to, there is a roadmap item to get an equivalent to npx, although that isn't implemented yet:

bun subcommand for running npm packages or URLs that may not already be installed. Like npx

@yensubldg
Copy link
Author

When I compile with yarn with Nextjs there will be a next file which will contain the compiled css file without having to manually do the Start the Tailwind CLI build process so I would suggest automatic execute build process instead of having to run it manually or install the dev

@nachoaldamav
Copy link

nachoaldamav commented Jul 26, 2022 •
edited
Loading

A quick workaround for using tailwind in dev without rebuilding the css is using the CDN.

_app.tsx | jsx

<Head>
   <title>Next.js</title>
   {process.env.NODE_ENV === "development" && (
    <script src="https://cdn.tailwindcss.com" />
   )}
</Head>

package.json

"scripts": {
    "dev": "bun dev",
    "build": "npm run build:css && next build",
    "build:css": "tailwindcss -o styles/globals.css",
    "start": "next start"
  }

@yensubldg
Copy link
Author

@nachoaldamav great workaround

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rgoomar @nachoaldamav @yensubldg