Question 415785 in Html Question posted in
Some basic documentation can be found here.

Html – Why some Tailwind CSS classes are not working and some even though config file is specific?

I’m creating a t-shirt shop using tailwindcss, and I have some weird problems:

When I render the ejs file (a type of file that allows for dynamic generation of html in Node.js, but is basically a HTML file),
with the tailwind css classes, some of them work, some not, I thought it may be with the order of them (eg. py-5 text-white, instead of text-white py-5), but it wasn’t that. even though I tried editing the paths to the files that are using the Tailwind css classes (in the tailwind.config.js file) shown below, and when that didn’t work, upon trying for hours, I have no idea what to do.

This is the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    relative: true, 
    files: [
    "./src/**/*.{html,js}",
    "./src/js/*.{html,js}"
    ]
  },
  theme: {
    extend: {
      colors: {
        white: "#ffffff",
        mainRed: "#AA0000ff",
        darkRed: "#710000ff",
      },
      gridTemplateColumns: {
        itemsGridSm: "325pt",
        itemsGridMd: "repeat(2, 4fr)",
        itemsGridLg: "repeat(3, 4fr)",
      },
    },
  },
  plugins: [],
};

I even tried POSTcss:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('@tailwindcss/deprecation-warnings'),
    require('autoprefixer'),
  ],
}

To no avail.

Screenshots for illustration:

Wrongly rendered tailwind css

The same code, but on tailwind css playground

My project structure

Yes, I’m rebuilding the css

Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is how my tailwin.config.js file looks like now! After running the rebuild on tailwind, every style works, thanks very much! :)

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,css}",
    "./src/**/*.{js,css}",
    "./src/**/*.{html,js}",
    "./src/js/*.{html,js}",
    "./src/**/*.ejs"
    ],
  theme: {
    extend: {
      colors: {
        white: "#ffffff",
        mainRed: "#AA0000ff",
        darkRed: "#710000ff",
      },
      gridTemplateColumns: {
        itemsGridSm: "200pt",
        itemsGridMd: "repeat(2, 4fr)",
        itemsGridLg: "repeat(3, 4fr)",
      },
      fontSize: {
        '3xl': '1.953rem',
        '4xl': '2.441rem',
        '5xl': '3.052rem'
      }
    },
  },
  plugins: [],
};


  2. 0 
       // I am having the same problem using tailwindCss with React currently.
    
    /I have an EJS Project I'm currently working on and I am using tailwindCss and It's working here's what the Tailwindconfig file looks like 
    
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./public/**/*.{js,css}",
    "./views/**/*.ejs",
    "./node_modules/tw-elements/js/**/*.js",
  ],
  darkMode: "class",
  plugins: [require("tw-elements/plugin.cjs")],
};

   //your Vscode might give you a suggestion to change to ES lint version , you can choose to ignore it or do it . It should work. Here's my postcss file config 

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search