无法导入 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

有时需要花费一些时间来处理导入并详细查看您编写的所有内容，这种情况经常发生在我身上，通常只是一个非常小的类型错误导致了这种情况。在您的 App 文件中检查您的第一次导入。我注意到在顶部它说 "import "tailwindcss/tailwind.css"" 尝试在顺风之前添加一个 "./"。所以它结束了你看起来像这样

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

我还建议安装自动导入扩展，它很有帮助！我希望这项工作，干杯。