How to configure next.js project with tailwindcss when module.css structure is already being used

Question

I am trying to configure tailwindcss in my next.js 14 project. I was already using module.css files but, now I want to move to tailwindcss. I do not want to convert my old components to tailwind for now, just want to build new components with tailwindcss. I installed tailwindcss and tried to configure it, but, I get the following warning and the tailwind styles are not being appplied

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

Here are my tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js,tsx}',
    './components/**/*.{html,js,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
}

My file structure is FE/src/*

module.css and global.css styles are located under FE/src/styles

I also have got postcss.config.js file

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

here is my next.config.mjs file

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'placehold.co',
        port: '',
        pathname: '/**',
      },
    ],
  },
  swcMinify: true,
  compiler: {
    styledComponents: true, // If you are using styled-components
  },
  webpack: (config) => {
    return config;
  }
};

export default nextConfig;

here is my package.json file

{
  "name": "Missari",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",

  },
  "dependencies": {
    "@babel/core": "^7.26.0",
    "@babel/node": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "@prisma/client": "^5.20.0",
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.7",
    "chart.js": "^4.4.4",
    "cloudinary": "^2.5.1",
    "css-loader": "^7.1.2",
    "daisyui": "^4.12.14",
    "dompurify": "^3.1.7",
    "i": "^0.3.7",
    "ical": "^0.8.0",
    "next": "^14.2.14",
    "npm": "^10.8.3",
    "pino-pretty": "^11.2.2",
    "postcss": "^8.4.49",
    "prisma": "^5.20.0",
    "react": "^18.3.1",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-quill": "^2.0.0",
    "style-loader": "^4.0.0",
    "tailwindcss": "^3.4.15",
    "zustand": "^5.0.0-rc.2"
  },
  "devDependencies": {
    "@types/ical": "^0.8.3",
    "@types/json-schema": "^7.0.15",
    "@types/node": "^20.16.10",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.9",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2"
  }
}

How can I configure my next.js project with tailwindcss while keeping module.css styles?

Wongjn · Accepted Answer · 2024-11-23 18:43:37Z

2

Your content paths seem to be incorrect. You say your project structure is FE/src/*, of which, I assume your project root is FE and your components are in src. Then you'd want to configure your content file globs like:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // An example of very specific path.
    './src/path/to/component.js',
    // More generalized.
    './src/path/to/components/**/*.{html,js,jsx,tsx}',
  ],

answered Nov 23, 2024 at 18:43

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to configure next.js project with tailwindcss when module.css structure is already being used

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related