@parcel/transformer-css：规则未知：@tailwind

发布于 2025-02-09 17:24:17 字数 1438 浏览 3 评论 0原文

我正在尝试设置我的React tablewind Antycript项目。但是，我偶然发现了一个错误，我很难解决。

@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;

我的index.css文件

@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>

任何人都可以协助设置或提供任何包裹打字机模板

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温柔戏命师 2025-02-16 17:24:17

我刚刚遇到了相同的错误消息，它是由缺失的.postcssrc配置文件引起的：

{
  "plugins": {
    "tailwindcss": {}
  }
}

请参见 https://parceljs.org/recipes/react/#tailwind-css

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

回复收藏 0 原文

赤濁 2025-02-16 17:24:17

您缺少rel属性

rel属性定义了当前页面和链接页面或资源之间的关系。
a rel =“ stylesheet”值指定样式表文件将加载到当前页面中。
CSS样式表的URL由href attribute
指定

语法

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

指定。转换

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

为

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

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">

回复收藏 0 原文

你的背包 2025-02-16 17:24:17

在导入CSS文件时

回复收藏 0 原文

沧笙踏歌 2025-02-16 17:24:17

对于试图从库中导出CSS（带有尾风）并获取此错误的人们。

要解决它，需要PostCSS变压器：

.parcelrc：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{css,pcss}": ["@parcel/transformer-postcss"]
  }
}

package.json：

{
  "name": "lib",
  "version": "1.0.0",
  "source": "src/index.tsx",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "css": "dist/styles.css",
  "targets": {
    "main": {
      "includeNodeModules": [],
      "context": "node",
      "outputFormat": "commonjs",
      "isLibrary": true
    },
    "module": {
      "includeNodeModules": [],
      "context": "browser",
      "outputFormat": "esmodule",
      "isLibrary": true
    },
    "css": {
      "source": "./src/styles/globals.css",
      "isLibrary": true
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "watch": "parcel watch --no-cache",
    "build": "parcel build --no-cache",
    "lint": "eslint"
  }, 
...
}

For people trying to export css (with tailwind) from a library and getting this error.

to fix it, postcss transformer is required:

.parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{css,pcss}": ["@parcel/transformer-postcss"]
  }
}

package.json:

{
  "name": "lib",
  "version": "1.0.0",
  "source": "src/index.tsx",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts",
  "css": "dist/styles.css",
  "targets": {
    "main": {
      "includeNodeModules": [],
      "context": "node",
      "outputFormat": "commonjs",
      "isLibrary": true
    },
    "module": {
      "includeNodeModules": [],
      "context": "browser",
      "outputFormat": "esmodule",
      "isLibrary": true
    },
    "css": {
      "source": "./src/styles/globals.css",
      "isLibrary": true
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "watch": "parcel watch --no-cache",
    "build": "parcel build --no-cache",
    "lint": "eslint"
  }, 
...
}

回复收藏 0 原文

~没有更多了~