TailwindCSS3 & Parcel2 - Issue getting tailwind to build

Question

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.

score 1 · Accepted Answer · answered Mar 07 '22 at 11:06

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.

TailwindCSS3 & Parcel2 - Issue getting tailwind to build

1 Answers1