'Tailwind CSS No Utility Classes Were Found

Trying to get Tailwind to work via CLI instructions here. I've got a (simplified) file structure of

-public 
  -stylesheets
    -styles.css
    -tailwind.css
-views
  -index
    -index.pug
    -page2.pug
    -page3.pug
  -user
    -index.pug
    -page2.pug
  -includes
    -templates
      -header.pug
      -footer.pug

I've followed the installation docs and a video on YouTube to try get it to work but when I set up tailwind.config.js with this :

module.exports = {
  content: [
    '/views/**/*.pug'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

and try a simple test using Tailwind classes on index/index.pug like this :

extends ../index/layout

block content

  h1.text-3xl
    | Hello world!

and run npx tailwindcss -i ./public/stylesheets/tailwind.css -o ./public/stylesheets/styles.css --watch

I'm just getting a completely unformatted H1 on the frontend and a terminal warning of warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.. What am I doing wrong?

csstailwind-css


Solution 1:[1]

In your Tailwind config file, your template path is listed as '/views/**/*.pug'.

The specified path starts at the root of your filesystem and not relative to the folder you're running the command from.

Update the path to './views/**/*.pug'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions