1

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 : SS of problem

On my browser terminal I get this in the console.log : enter image description here

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

PJK
  • 73
  • 8

2 Answers2

0

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

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
MrArcher
  • 1
  • 2
    Welcome to StackOverflow! Please edit your answer to fix it, since at this state, it can currently cause lots of confusion. That is not code, it is a terminal command. Please also tell them what it does/fixes and how it helps. Read: https://stackoverflow.com/help/how-to-answer – ethry Jun 05 '22 at 06:09
0

Write this:

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

instaead of :

@tailwind base;
@tailwind components;
@tailwind utilities
janki gohil
  • 1
  • 2