@parcel/transformer-css: Unknown at rule: @tailwind-CodePudding

I am trying to set up my react tailwind an typescript project. However i stumbled across an error that i have a hard time getting around.

@parcel/transformer-css: Unknown at rule: @tailwind

  /home/sizzions/Projects/trials/owen/src/index.css:1:10
  > 1 | @tailwind base;
  >   |          ^
    2 | @tailwind components;
    3 | @tailwind utilities;

my index.css file

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

index.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const container = document.getElementById('root')!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../index.css" >
    <title>Owen's Bloggy</title>
</head>

<body>
    <div id="root">

    </div>
    <script type="module" src="./../index.tsx">
    </script>
</body>

</html>

can anyone assist set up or provide any parcel typescript template

CodePudding user response：

forgot to add rel='stylesheet' in index.html when importing css file

CodePudding user response：

You are missing the rel attribute

The rel attribute defines the relationship between the current page and the linked page or resource.
A rel="stylesheet" value specifies that the stylesheet file will be loaded into the current page.
The URL for the CSS stylesheet is specified by the href attribute

Syntax

<link rel="stylesheet" href="url" />

Hence to solve the problem. Convert

<link href="../index.css" >

<link rel="stylesheet" href="../index.css">