Menu
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
698
asked Jan 23 '26 16:01
I just encountered the same error message and it was caused by a missing .postcssrc configuration file:
{
"plugins": {
"tailwindcss": {}
}
}
see https://parceljs.org/recipes/react/#tailwind-css
153
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" >
To
<link rel="stylesheet" href="../index.css">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With