[bug]: New CLI astro installation instructions lead to No Tailwind error

[coobeeyon]

Describe the bug

Followed exact instructions for astro new project creation. When I got to npx shadcn@latest init I received errors about not finding tailwind.

Affected component/components

CLI

How to reproduce

Follow astro installation instructions at https://ui.shadcn.com/docs/installation/astro

Codesandbox/StackBlitz link

No response

Logs

``✔ Preflight checks.
✔ Verifying framework. Found Astro.
✖ Validating Tailwind CSS.
✖ Validating import alias.

No Tailwind CSS configuration found at /home/username/HotWebsite.
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/astro to get started.

No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/astro to learn how to set an import alias``

System Info

Ubuntu 22.04 LTS
node v18.17.1

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[aghwotu]

I have the same issue with React + Vite using SCSS and TypeScript. This is the error I am getting:

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✖ Validating Tailwind CSS.
✔ Validating import alias.

No Tailwind CSS configuration found at /project-folder-path.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.

[OpoJack]

I was able to get around this by adding the standard tailwind config in global styles.

Both tailwind and shadcn docs indicate that you don't need to configure a global styles.css for Astro but the cli seems to require both a tailwind.config and a global styles.css with the typical @tailwind directives.

from packages/shadcn/src/preflights/preflight.init.ts

const tailwindSpinner = spinner(`Validating Tailwind CSS.`, {
    silent: options.silent,
  }).start()
  if (!projectInfo?.tailwindConfigFile || !projectInfo?.tailwindCssFile) {
    errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
    tailwindSpinner?.fail()
  } else {
    tailwindSpinner?.succeed()
  }

My temporary fix is adding those directives to your global styles.css

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

[shadcn]

Looks like we need to update the astro docs for applyBaseStyles. Let me take a look.

[shadcn]

https://github.com/shadcn-ui/ui/pull/4723

[shadcn]

I fixed this yesterday. Added new docs. Let me know if this works.

[romashmalcev]

I still have this problem.

[romashmalcev]

I use vite configurations

[roblesbraun]

I have the same issue with vanilla react and vite. Shadcn is not recognizing tailwindcss installation

[Chameleonl]

I fixed this yesterday. Added new docs. Let me know if this works.

Hi, still having this issue with Vite React + TS, following all instructions at https://ui.shadcn.com/docs/installation/vite, the workaround with styles.css described in this thread helped.

[Dylbobin]

Hey Everyone,

Here is the Fix....At least using Vite + JS

Step01) Validate that you followed the instructions here: [https://ui.shadcn.com/docs/installation/vite]

Note you only need to create a jsconfig.json file and paste:

{ "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/": [ "./src/" ] } // ... } }

Step02) Update your tailwind.config.js:

/* @type {import('tailwindcss').Config} / export default { content: [ "./index.html", "./src/*/.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

Step03) go to index.css under src and paste this at the top of the file:

Note Not sure if this is necessary or not but worked for me

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

[imrishit98]

I have same issue for Next.js

[roblesbraun]

I am still unable to create a new project with Vite. Any updates?