Double tailwind.config

[raihan-ramadhan]

when we init shandcn-ui there is no option using tailwind.config.ts or tailwind.config.js, that's make we have two file tailwind.config if we use next.js --typescript

[RinKhimera]

after running the init and when it's prompting where the tailwind.config file, press TAB and edit the "js" to "ts"

[lucas-quinn]

after running the init and when it's prompting where the tailwind.config file, press TAB and edit the "js" to "ts"

Thank you. I didn't realize the grey text can be switched.

[raihan-ramadhan]

after running the init and when it's prompting where the tailwind.config file, press TAB and edit the "js" to "ts"

but if we just edit js to ts manually we dont get benefit from typescript, because the file that get install still javascript without a type.

**edit: manually i meant here is not change the filename directly but manually change when get ask where is your tailwind.config.js located?

it would be better if it could be installed automatically as .ts if we use next.js --typescript

[burhan-maliksher]

facing the same issue😂

[RinKhimera]

after running the init and when it's prompting where the tailwind.config file, press TAB and edit the "js" to "ts"

but if we just edit js to ts manually we dont get benefit from typescript, because the file that get install still javascript without a type. it will be better if it can be automatically install as .ts if we use next.js --typescript

Don't edit the tailwind.config file directly from js to ts or anything like that.

Right after installing npx create-next-app@latest my-app --typescript --tailwind --eslint

Run the CLI
npx shadcn-ui@latest init

When you will be ask where is your tailwind.config.js located?, just edit the placeholder tailwind.config.js by pressing TAB and changing the js to ts.

[raihan-ramadhan]

after running the init and when it's prompting where the tailwind.config file, press TAB and edit the "js" to "ts"

but if we just edit js to ts manually we dont get benefit from typescript, because the file that get install still javascript without a type. it will be better if it can be automatically install as .ts if we use next.js --typescript

Don't edit the tailwind.config file directly from js to ts or anything like that.

Right after installing npx create-next-app@latest my-app --typescript --tailwind --eslint

Run the CLI npx shadcn-ui@latest init

When you will be ask where is your tailwind.config.js located?, just edit the placeholder tailwind.config.js by pressing TAB and changing the js to ts.

yes sir, i tried that, When i get ask where is your tailwind.config.js located? i used TAB and changing the name from .js to .ts, but it still install the .js code in it right?

[kam-st]

Using the following config

`import type { Config } from "tailwindcss";

const config: Config = {
darkMode: ["class"],
content: [
"./pages//*.{ts,tsx}",
"./components//.{ts,tsx}",
"./app/**/.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
};

export default config;
`

[rustyx]

IMHO npx shadcn-ui@latest init should detect presense of tailwind.config.ts and default to that.

[Vitagliano]

I'm having this problem as well, using the boilerplate Platforms by Vercel and it have a tailwind.config.js, when I run npx shadcn-ui@latest init it creates a tailwind.config.ts and break my whole application...

[burhan-maliksher]

0Solution
1.run: npx create-next-app@latest
2.run: npx shadcn-ui@latest init
3. You will be asked a few questions to configure components.json:

• Would you like to use TypeScript (recommended)? no / yes
• Which style would you like to use? › Default
• Which color would you like to use as base color? › Slate
• Where is your global CSS file? › › app/globals.css
• Do you want to use CSS variables for colors? › no / yes
• Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
• Where is your tailwind.config.js located? › tailwind.config.js
• Configure the import alias for components: › @/components
• Configure the import alias for utils: › @/lib/utils
• Are you using React Server Components? › no / yes

the most important one which are casing this issue are two :

1. Where is your global CSS file? › › app/globals.css
2. Where is your tailwind.config.js located? › tailwind.config.js

if you have created src directory for app router while creating next js project then you must write it like this:
--- Where is your global CSS file? › › src/app/globals.css
and
---Where is your tailwind.config.js located? › tailwind.config.ts

for celarification see the below image:

[Vitagliano]

@burhan-maliksher like I said, I'm not creating a project from scratch, I'm using the Plataforms boilerplate by Vercel... When I run the npx shadcn-ui@latest init it only ask me 3 questions:

• Which style would you like to use? » Default
• Which color would you like to use as base color? » Gray
• Would you like to use CSS variables for colors? ... no / yes

Code_cvfYmPlxgX.mp4

[raihan-ramadhan]

@burhan-maliksher like I said, I'm not creating a project from scratch, I'm using the Plataforms boilerplate by Vercel... When I run the npx shadcn-ui@latest init it only ask me 3 questions:

• Which style would you like to use? » Default
• Which color would you like to use as base color? » Gray
• Would you like to use CSS variables for colors? ... no / yes

Code_cvfYmPlxgX.mp4

maybe your npx is broken, try update your node js, if it's still broken you must write manual then, Manual Installation

[AkhilReddy86]

@burhan-maliksher like I said, I'm not creating a project from scratch, I'm using the Plataforms boilerplate by Vercel... When I run the npx shadcn-ui@latest init it only ask me 3 questions:

• Which style would you like to use? » Default
• Which color would you like to use as base color? » Gray
• Would you like to use CSS variables for colors? ... no / yes

Code_cvfYmPlxgX.mp4

did you find solution?...same issue here.

[fahdfady]

if you have an existing project and you don't want to init again:
you can go to components.json
change
"tailwind": { "config": "tailwind.config.js",
to
"tailwind": { "config": "tailwind.config.ts",
`

[welmarr]

@burhan-maliksher like I said, I'm not creating a project from scratch, I'm using the Plataforms boilerplate by Vercel... When I run the npx shadcn-ui@latest init it only ask me 3 questions:

• Which style would you like to use? » Default
• Which color would you like to use as base color? » Gray
• Would you like to use CSS variables for colors? ... no / yes

Code_cvfYmPlxgX.mp4

did you find solution?...same issue here.

If anyone else is having issues with this and none of the above worked, I found it's because I had a tailwind.config.js file and shadcn created a tailwind.config.ts file and only the .js file was being read. The solution being to just delete the .js config file. Write by @unxok in Where these classes come from?

It worked for me.