reactjs - react, typescript, tailwind + npm & vite - styles from tailwind config do not work - Stack Overflow

admin管理员组

文章数量:1026989

I am trying to learn some web dev and starting to learn typescript with react and tailwind using npm and vite...

I was making the initial set up via. tailwind page:

I don't really know what I am doing wrong, does anyone know, what I am missing?

Here are some photos from it:

tailwind config

project structure

I just started and use it f.e. in the Button component - bg-gray-100 works, things I did not

I tried a lot of things with copilot, I still have trouble understanding all of it, mainly the connections between vite, npm, postcss and tailwind. Also tried things few times over:/ The imports in .css file is also killing me, the old tailwind version was using them differently and also with the postcss, so that really confuses me...

Thanks for any help:)

I am trying to learn some web dev and starting to learn typescript with react and tailwind using npm and vite...

I was making the initial set up via. tailwind page: https://tailwindcss/docs/installation/using-vite

I don't really know what I am doing wrong, does anyone know, what I am missing?

Here are some photos from it:

tailwind config

project structure

I just started and use it f.e. in the Button component - bg-gray-100 works, things I did not

I tried a lot of things with copilot, I still have trouble understanding all of it, mainly the connections between vite, npm, postcss and tailwind. Also tried things few times over:/ The imports in .css file is also killing me, the old tailwind version was using them differently and also with the postcss, so that really confuses me...

Thanks for any help:)

• reactjs
• typescript
• npm
• tailwind-css
• vite

Share Improve this question Follow edited Feb 22 at 18:25 markCos0 asked Feb 22 at 18:21 markCos0markCos0 133 bronze badges 3

• 2 Welcome to stackoverflow, please review How to Ask provide a minimal reproducible example when asking questions. If you could add the relevant code snippets to the page rather than linking to images that would make it easier for others to assist you. – admcfajn Commented Feb 22 at 18:59
• 1 AI probably doesn't know enough about Tailwind v4. The Tailwind config JS file is for v3. You don't need PostCSS with Vite - Tailwind has a dedicated Vite plugin. – Wongjn Commented Feb 22 at 18:59
• 1 Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Feb 22 at 21:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

TailwindCSS v4 is backwards compatible with v3

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

@import "tailwindcss";
@config "../../tailwind.config.js";

• Using a JavaScript config file - TailwindCSS v4 Update Guide

The configuration setting has changed by default. However, you have the option to declare the location of your tailwind.config.js file using a relative path in your default CSS file so you can use it again.

Whats breaking changes in v4?

• Get started with Tailwind CSS - TailwindCSS v4 Docs
• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• Error in Tailwind CSS Implementation inside React App
• v4 is backwards compatible with v3 - Using tailwind.config.js by @config directive
• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command
• Automatic Source Detection from TailwindCSS v4

TailwindCSS v3

The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3

I am trying to learn some web dev and starting to learn typescript with react and tailwind using npm and vite...

I was making the initial set up via. tailwind page:

I don't really know what I am doing wrong, does anyone know, what I am missing?

Here are some photos from it:

tailwind config

project structure

I just started and use it f.e. in the Button component - bg-gray-100 works, things I did not

I tried a lot of things with copilot, I still have trouble understanding all of it, mainly the connections between vite, npm, postcss and tailwind. Also tried things few times over:/ The imports in .css file is also killing me, the old tailwind version was using them differently and also with the postcss, so that really confuses me...

Thanks for any help:)

I am trying to learn some web dev and starting to learn typescript with react and tailwind using npm and vite...

I was making the initial set up via. tailwind page: https://tailwindcss/docs/installation/using-vite

I don't really know what I am doing wrong, does anyone know, what I am missing?

Here are some photos from it:

tailwind config

project structure

I just started and use it f.e. in the Button component - bg-gray-100 works, things I did not

I tried a lot of things with copilot, I still have trouble understanding all of it, mainly the connections between vite, npm, postcss and tailwind. Also tried things few times over:/ The imports in .css file is also killing me, the old tailwind version was using them differently and also with the postcss, so that really confuses me...

Thanks for any help:)

• reactjs
• typescript
• npm
• tailwind-css
• vite

Share Improve this question Follow edited Feb 22 at 18:25 markCos0 asked Feb 22 at 18:21 markCos0markCos0 133 bronze badges 3

• 2 Welcome to stackoverflow, please review How to Ask provide a minimal reproducible example when asking questions. If you could add the relevant code snippets to the page rather than linking to images that would make it easier for others to assist you. – admcfajn Commented Feb 22 at 18:59
• 1 AI probably doesn't know enough about Tailwind v4. The Tailwind config JS file is for v3. You don't need PostCSS with Vite - Tailwind has a dedicated Vite plugin. – Wongjn Commented Feb 22 at 18:59
• 1 Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Feb 22 at 21:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

TailwindCSS v4 is backwards compatible with v3

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

@import "tailwindcss";
@config "../../tailwind.config.js";

• Using a JavaScript config file - TailwindCSS v4 Update Guide

The configuration setting has changed by default. However, you have the option to declare the location of your tailwind.config.js file using a relative path in your default CSS file so you can use it again.

Whats breaking changes in v4?

• Get started with Tailwind CSS - TailwindCSS v4 Docs
• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• Error in Tailwind CSS Implementation inside React App
• v4 is backwards compatible with v3 - Using tailwind.config.js by @config directive
• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command
• Automatic Source Detection from TailwindCSS v4

TailwindCSS v3

The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

npm install -D tailwindcss@3

本文标签：