Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Are there any examples of using Tailwind CSS with Bun


Are there any examples of using Tailwind CSS with Bun


To use Tailwind CSS with Bun, there are several approaches and examples available:

1. Basic Setup:
- First, install Tailwind CSS using Bun:

bash
     bun add -d tailwindcss postcss autoprefixer
     

- Initialize Tailwind CSS configuration:
bash
     bun run tailwindcss init -p
     

- Update your `tailwind.config.js` to include the paths to your template files:
javascript
     /** @type {import('tailwindcss').Config} */
     export default {
       content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
       theme: {
         extend: {},
       },
       plugins: [],
     };
     

- Include Tailwind's directives in your CSS file (e.g., `index.css`):
css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

2. Example Project:
- There is a GitHub repository showcasing a simple app using Bun with HTMX and Tailwind CSS. This example demonstrates how to serve HTML with interactivity using HTMX while styling with Tailwind. The command `bun dev:tailwind` is used to regenerate the CSS file as needed during development[2][3].

3. Using Vite:
- If you are using Vite with Bun, the process is similar to a standard Vite setup. After creating a Vite project, you can follow the same installation steps for Tailwind CSS as mentioned above. The commands for running the development server will also be similar[4][8].

4. Tutorials and Resources:
- A tutorial video is available that walks through creating a web application using Bun, HTMX, and Tailwind CSS, which can be helpful for visual learners[5].

These methods illustrate how to effectively integrate Tailwind CSS with Bun in various project setups, allowing for rapid prototyping and efficient styling.

Citations:
[1] https://stackoverflow.com/questions/72919826/how-to-use-tailwind-with-bun
[2] https://github.com/danawoodman/bun-htmx
[3] https://dev.to/sjdonado/htmx-bun-a-real-world-app-2c3a
[4] https://linkb.hashnode.dev/bunsh-with-react-typescript-tailwindcss-and-storybook
[5] https://www.youtube.com/watch?v=RN9raWQNGnA
[6] https://github.com/oven-sh/bun/issues/842
[7] https://www.reddit.com/r/neovim/comments/11bpzmk/lsp_typescript_and_tailwind_with_bun_major/
[8] https://tailwindcss.com/docs/guides/vite