无法导入 TailwindCSS

Question

I'm trying to import TailwindCSS but it does not seem to work as no CSS is applied.

I have it in my package.json :

"devDependencies": {
    "autoprefixer": "^10.2.4",
    "css-loader": "^5.1.1",
    "postcss": "^8.2.7",
    "style-loader": "^2.0.0",
    "tailwindcss": "^2.0.3"
}

I have installed it via npm install -D tailwindcss@latest postcss@latest autoprefixer@latest .

Index:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MenuAppBar from './header';
import reportWebVitals from './reportWebVitals';
import Tail from './App';

ReactDOM.render(
    <React.StrictMode>
        <MenuAppBar />
        <Tail />
    </React.StrictMode>,
    document.getElementById('root')
);

App looks like this:

import "tailwindcss/tailwind.css"
    
export default function Tail(){
    return (
        <div class="chat-notification">
            <div class="chat-notification-logo-wrapper">
                <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo"></img>
            </div>
            <div class="chat-notification-content">
                <h4 class="chat-notification-title">ChitChat</h4>
                <p class="chat-notification-message">You have a new message!</p>
            </div>
        </div>
    )
}

Answer 1

Sometimes it takes some playing around with the imports and reviewing in detail everything you write, this happens to me so often and its usually just a really small type error that creates this. check out your first import in your App file. i noticed at the top it says "import "tailwindcss/tailwind.css"" try adding a "./" before tailwind. so it ends uo looking like this

import "./tailwindcss/tailwind" If you are using vscode it helps when you begin typing the./ when importing files becasue the pop-up displays the files you have in that immediate path.

I also recommend installing the automatic import extension, it helps alot, I hope this work. cheers.