无法导入TailwindCSS

Question

我正在尝试导入TailwindCSS，但似乎不起作用，因为没有应用CSS。

我的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"
}

我已经通过npm install -D tailwindcss@latest postcss@latest autoprefixer@latest安装了它。

索引：

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')
);

应用程序看起来像这样：

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

有时需要花点时间处理导入，仔细检查你写的所有东西，这种情况经常发生在我身上，通常只是一个非常小的类型错误造成了这种情况。在应用程序文件中检出您的第一个导入。我注意到在顶部写着"import“tailwind the /trawind.css”“尝试在顺风之前添加一个"./”。所以它的结尾是这样的

如果您使用的是vscode，则在导入文件时开始键入./会有所帮助，因为弹出窗口会显示您在该直接路径中拥有的文件。

我也推荐安装自动导入扩展，它有很大帮助！我希望这行得通，干杯。