Tailwind: Not rewriting GET /index.html because the path includes a dot (.) character.

[angel-luis]

I've cloned the boilerplate and followed this instructions: https://electron-react-boilerplate.js.org/docs/styling#custom-tailwind-config

I' reviewed every line of code 3 times, is exactly as the docs.

But when I do npm start I get the following error:

Not rewriting GET /index.html because the path includes a dot (.) character.

This happens when I put this on webpack.config.renderer.dev.ts:

{
        test: /\.s?css$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require("tailwindcss"), require("autoprefixer")],
              },
            },
          },
        ],
        exclude: /\.module\.s?(c|a)ss$/,
      },

Also I've tried the Without Custom Tailwind Config but Tailwind doesn't loads.

Can anyone share a recent boilerplate with tailwindcss installed? Thank you.

[angel-luis]

I've clone the 4.6.0 release and still the same error.

Also it says:

ERROR in ./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/tailwindcss/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) C:\Github\electron\electron-react-boilerplate-4.6.0\node_modules\tailwindcss\tailwind.css Unknown word

  1 |
> 2 |       import API from "!../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../style-loader/dist/runtime/insertBySelector.js";
 @ ./node_modules/tailwindcss/tailwind.css 8:6-255 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-225 83:0-225 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/renderer/App.tsx 11:0-35
 @ ./src/renderer/index.tsx 10:30-46

[angel-luis]

The problem it's on the webpack.config.renderer.dev.ts file, that's the correct configuration:

{
        test: /\.s?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
            },
          },
          'sass-loader',
        ],
        include: /\.module\.s?(c|a)ss$/,
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('tailwindcss'), require('autoprefixer')],
              },
            },
          },
        ],
        exclude: /\.module\.s?(c|a)ss$/,
      },
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      // Images
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

[mlynch]

The solution for me was to remove this set of lines, otherwise even with the correct postcss-loader section I would get this error: