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