shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
75.67k stars 4.75k forks source link

[feat]: Add tailwind content step for vite guide #4975

Open imMatheus opened 2 months ago

imMatheus commented 2 months ago

Feature description

In the guide for setting up shadcnui with vite, https://ui.shadcn.com/docs/installation/vite, I suggest we add a new section between current 2 and 3 that tells the user to change their content field in tailwind.config.js to include content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'].

Screenshot 2024-09-26 at 18 29 02

This is a step that is needed to get it to work. I followed the steps that there currently in the docs and it did not work as I got the following issue:

No Tailwind CSS configuration found at /Users/me/Desktop/project
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

So its a necessary step to get it to work now, after I changed the content field it started working. It's also what Tailwind has right after installing the package so makes sense to include tbh

Screenshot 2024-09-26 at 18 31 58

Affected component/components

No response

Additional Context

I could make a quick simple PR for this to get it out 🙏

Before submitting

iainbrux commented 2 months ago

I agree this is a very important step missing from the documentation that is required. This caused a small headache for an hour or two at the start of the project but adding the above from the tailwind documentation fixed the issue.

a89529294 commented 1 month ago

You also need to paste

@tailwind base;
@tailwind components;
@tailwind utilities;

in index.css to make it work