인프런 커뮤니티 질문&답변

강의 보고 따라했는데 tailwind가 적용이 안되네요 뭐가 문제일까요? Hello world!에 밑줄이 그어져야 하는데 그대로예요.

다른분이 하신 질문보고 거기 답변달린 방법들 해봤는데 계속 해결이 안되네요..

시도한 방법

1. tailwind.config.js 파일의 content 확인

2. 터미널에서 pakage.json에 dependencies 최신버전으로 업그레이드하기

3. App.css 확인

4. npm run start했던거 껐다가 다시켜기

아래는 해당하는 파일들이예요.

App.css에서 [Unknown at rule @tailwindcss (unknownAtRules)] 경고가 떴었어요 이게 문제일까요?

근데 저 오류로 검색해보면 죄다 그냥 경고 무시하기 설정방법만 나오던데 다른 해결방법이 있는건가요?

tailwind.config.js

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

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/*아래는 생략*/

app.js

import React, {useState} from "react";
import "./App.css";
import List from "./components/List";
import Form from "./components/Form";


export default function App() {

  const [todoData, setTodoData] = useState([]);
  const [value, setValue] = useState("");

  
  const handleSubmit = (e) => {
    e.preventDefault();

    let newTodo = {
      id: Date.now(),
      title: value,
      completed: false
    }

    setTodoData(prev => [...prev, newTodo]);
    setValue("");
  };

 
 
  return (
    <div className="container">
      <div className="todoBlock">
        <div className="title">
          <h1>할 일 목록</h1>
        </div>
        <h1 className="text-3xl font-bold underline">
          Hello world!
        </h1>
        <List todoData={todoData} setTodoData={setTodoData}/>
        <Form handleSubmit={handleSubmit} value={value} setValue={setValue} />
      </div>
    </div>
  )
  
}