You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file for TailwindCss

Question

I'm using tailwindcss for the first time, using tutorials I found online. So far npm installed tailwindcss, postcss, postcss-loader, autoprefixer. From Tailwind docs, I needed a tailwind.config.js and postcss.config.js.

tailwind.config.js

module.exports = {
  content: ["./client/*.{html,js}", "./client/**/*.{html,js}"],
  theme: {
    extend: {},
    container: {
      center: true,
    },
  },
};

postcss.config.js:

const tailwind = require("tailwindcss");
module.exports = {
  plugins: [tailwind("./tailwind.config.js"), require("autoprefixer")],
};

I even have a build script for tailwind :

 "build:css": "postcss public/tailwind.css -i public/style.css",

In my tailwind.css file I added the Tailwind directives :

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

What kind of loader do I need in my webpack? In addition, I get this under the problems tab in my terimal :

On my browser terminal I get this in the console.log :

Any tips on how to fix this and start styling my app?

Answer 1

Use this code to install a loader: npm install --save-dev postcss-loader postcss

Answer 2

Write this:

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

instaead of :

@tailwind base;
@tailwind components;
@tailwind utilities