Tailwind CSS for Shopify theme | tailwind build is not working

Question

I am trying to generate css code by compiling tailwind base, components and utilities to develop Shopify theme.

Below is my files.

tailwind.config.json

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

application.css

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

Executing below code:

npx tailwindcss build -i  src/styles/application.css -o src/styles/tailwind.css

Screenshot as Below

terminal screenshot after running above code

Please let me know for more information on this issue.

Thanks in Advance.

Answer 1

Are your HTML and JavaScript files in src folder?
Make sure your to separate your tailwindcss file and html js for better code structure understanding.

module.exports = {
  content: ["./the folder where your html,js files exits/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}