How do inline tailwind CSS and multiple file tailwind CSS differs?

Do we have to write it inline like:

index.css file which contains all tailwind starters

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

or in separate files like:

index.css
- file1.css
- file2.css

Solution

Your index.css file can contain utility classes. You use a tailwind command tailwind -i index.css -o output.css to build and generate a css file.

In your html file: you need to use tailwind inline in class attribute:

<body class="text-white border border-blue-400">

    you rest of body
</body>

One last this you need is tailwind configuration file, which is automatically created when you run tailwind init in your working directory. This configuration file looks something like this:

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

The purpose for this file is to check if any html file is using tailwind classes and if so based on that render output.css when you run build command.