TailwindCSS3 & Parcel2 - 构建顺风的问题

发布于 2025-01-10 02:20:31 字数 1541 浏览 0 评论 0原文

我通过 API 直接使用 Parcel，通过以下配置：

import { Parcel } from '@parcel/core';

export default new Parcel({
  entries: 'src/index.html',
  defaultConfig: '@parcel/config-default'
});

我使用 postcss.config.mjs 和 tailwind.config.mjs 来初始化 Tailwind，如下所示

// postcss.config.mjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

// tailwind.config.mjs
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {}
  },
  plugins: [],
  mode: 'jit'
};

...并将 tailwind 导入到我的项目中导入到index.html 的index.css 文件；

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

<!doctype html>
<html>
  <head>
    <link href="./index.css" type="text/css" rel="stylesheet">
  </head>
  <body class='bg-black'>
    <script type='module' src='./index.js'></script>
  </body>
</html>

最后是我的 package.json （我将项目定义为模块），

{
  "type": "module",
  "name": "app",
  "source": "./src/index.html",
  "dependencies": {
    "autoprefixer": "10",
    "parcel": "2",
    "postcss": "8",
    "tailwindcss": "3"
  },
  "alias": { "src": "./src" },
}

但出于某种原因，这将无法正确构建，并且我的网页没有样式。

原文

I'm using Parcel through the API directly, via the following config:

import { Parcel } from '@parcel/core';

export default new Parcel({
  entries: 'src/index.html',
  defaultConfig: '@parcel/config-default'
});

I'm using a postcss.config.mjs and tailwind.config.mjs in order to initialize Tailwind, as seen below

// postcss.config.mjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

// tailwind.config.mjs
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {}
  },
  plugins: [],
  mode: 'jit'
};

...and importing tailwind into my project via an index.css file imported into index.html;

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

<!doctype html>
<html>
  <head>
    <link href="./index.css" type="text/css" rel="stylesheet">
  </head>
  <body class='bg-black'>
    <script type='module' src='./index.js'></script>
  </body>
</html>

and lastly my package.json (where I define the project as a module)

{
  "type": "module",
  "name": "app",
  "source": "./src/index.html",
  "dependencies": {
    "autoprefixer": "10",
    "parcel": "2",
    "postcss": "8",
    "tailwindcss": "3"
  },
  "alias": { "src": "./src" },
}

For some reason though, this won't build properly and my webpage has no styling.

分享到QQ

分享到微博

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

发布评论

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

つ低調成傷 2025-01-17 02:20:31

我设法让它像这样工作：

将 postcss.config.mjs 更改为 .postcssrc

// .postcssrc
{
  "plugins": {
      tailwindcss: {},
      autoprefixer: {}
  }
}

将 tailwind.config.mjs 更改为 tailwind .config.cjs

// tailwind.config.cjs
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

您可以像这样使用parcel： node build.mjs

// build.mjs
import {Parcel} from '@parcel/core';

let bundler = new Parcel({
  entries: 'src/index.html',
  defaultConfig: '@parcel/config-default',
  serveOptions: {
    port: 3000
  },
  hmrOptions: {
    port: 3000
  }
});

await bundler.watch();

尝试一下，看看它是否也适合您。

I managed to make it work like this:

Change postcss.config.mjs to .postcssrc

// .postcssrc
{
  "plugins": {
      tailwindcss: {},
      autoprefixer: {}
  }
}

Change tailwind.config.mjs to tailwind.config.cjs

// tailwind.config.cjs
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

You use parcel like this: node build.mjs

// build.mjs
import {Parcel} from '@parcel/core';

let bundler = new Parcel({
  entries: 'src/index.html',
  defaultConfig: '@parcel/config-default',
  serveOptions: {
    port: 3000
  },
  hmrOptions: {
    port: 3000
  }
});

await bundler.watch();

Try it and lets see if it works for you as well.

回复收藏 0 原文

~没有更多了~