can i apply tailwind css in multiple html files that are placed in the same folder?

Question

I am learning tailwind and i am new in it. When I try to create multiple html files in a folder and try to apply tailwind, it is applying the property only to the first html file i have created. And moreover, when i am trying to open other html files , still the first html file is opening, maybe I am asking a silly question , but an answer regarding that will be truly appreciated..

I have first created an index.html file and apply tailwind in it. It works. But then i created another file named as "index1.html" and when i linked the file to my tailwind-css, again the first one "index.html" is opening. So i just want to ask can we apply tailwind to multiple html files in same folder , if yes how?

Answer 1

Yes you can place multiple html files in the same folder and the tailwind applies to them as well, if u have installed and configured it correctly. As far as the accessibility concern is required, by default you browser URL will be showing something like http://localhost:5173, for example, It by default moves to index.html, If you desire to check your index1.html, just go on the address bar and write the name of your html file next to local host e.g. http://localhost:5173/index1.html. It worked for me.

Answer 2

Yes, you can apply tailwind to multiple html files. To do that, you have to update your tailwind.config.js file.

As per tailwind's documentation, you could configure the path to all your HTML files' path.

So your solution would be:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './index1.html',
  ],
  // ...
}