How to include tailwind installed using npm?

Question

Previously had Tailwind included using CDN. now installed with npm, all the 3 .css files are being included but I can't see the styles being used in my html document.

Directory structure and link to style.css

tailwind.config.js is like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json has tailwind css 3.3.3 included

All the paths to .css files of tailwind are correct (base, components, utilities and in network tabs can see their successful requests.

I tried checking links. paths. package.json and tailwind.config.js files. everything seems in order. why are styles still not being applied? I'm using simple CSS not SCSS/SASS.

did you import the css file in your index/main js file?

Harshit T
– Harshit T

2023-08-24 08:27:20 +00:00
Commented Aug 24, 2023 at 8:27 — Harshit T
– Harshit T, Commented Aug 24, 2023 at 8:27
yes @HarshitT i did .

Abdullah Ahmad
– Abdullah Ahmad

2023-08-25 09:48:46 +00:00
Commented Aug 25, 2023 at 9:48 — Abdullah Ahmad
– Abdullah Ahmad, Commented Aug 25, 2023 at 9:48

Kannu Mandora · Accepted Answer · 2023-08-24 08:29:10Z

0

You need to run this command:

npm install npm install -D tailwindcss postcss autoprefixer vite

In package.json:

scripts: {
 "start": "vite",
 "build": "vite build"
}

Your tailwind.config.js should be:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

and Import style.css into html file like this:

<link href="./style.css" rel="stylesheet" >

answered Aug 24, 2023 at 8:29

Kannu Mandora

6926 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abdullah Ahmad Over a year ago

Tried this, it's not working. Same issue

Abdullah Ahmad Over a year ago

Tried this, it's not working. Same issue In Network tab, this is order of requests. index.html style.css base.css components.css utilities.css ws This is in my style.css file: (all start with @) import 'node_modules/tailwindcss/base.css'; import 'node_modules/tailwindcss/components.css'; import 'node_modules/tailwindcss/utilities.css';

Kannu Mandora Over a year ago

kindly share your code using codesandbox.

Abdullah Ahmad Over a year ago

github.com/AbdullahAhmadAAK/Portfolio-Abdullah-AAK is my code. I've changed index.html file only to include tailwind by importing locally abdullahahmadaak.github.io/Portfolio-Abdullah-AAK you can view the portfolio here and see css not working

Collectives™ on Stack Overflow

How to include tailwind installed using npm?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related