Не удается импортировать TailwindCSS

#javascript #reactjs #tailwind-css

Вопрос:

Я пытаюсь импортировать 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>
    )
}

1. Когда вы говорите «CSS не применяется», вы имеете в виду CSS из TailwindCSS конкретно или только в целом? Похоже, вы не применяете в своем коде какие-либо служебные классы из TailwindCSS.

Ответ №1:

Иногда требуется немного поиграть с импортом и детально изучить все, что вы пишете, это случается со мной так часто, и обычно это просто очень маленькая ошибка типа, которая создает это. проверьте свой первый импорт в файле приложения. я заметил, что вверху написано «импорт «tailwindcss/tailwind.css»» попробуйте добавить «./» перед попутным ветром. итак, все заканчивается так

импорт «./tailwindcss/попутный ветер» Если вы используете vscode, это помогает, когда вы начинаете вводить ./ при импорте файлов, потому что во всплывающем окне отображаются файлы, которые у вас есть в этом непосредственном пути.

Я также рекомендую установить расширение автоматического импорта, это очень помогает! Я надеюсь, что это сработает, ваше здоровье.