TailwindCSS 3 和 Parcel 2 - 构建顺风问题

Question

我通过以下配置直接通过 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'
};

...并通过导入到 index.html;

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

@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" },
}

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

Answer 1

我设法让它像这样工作：

将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: [],
}

您这样使用包裹：节点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();

试一试，看看它是否也适合你。

TailwindCSS 3 和 Parcel 2 - 构建顺风问题

TailwindCSS3 & Parcel2 - Issue getting tailwind to build

tailwind-css

postcss

parceljs