What is the difference between inline tailwind CSS and multi-file tailwind CSS?

Question

Do we have to write it inline as:

• Index .css file containing all Tailwind launchers

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

Or in a separate file, for example:

• index.css
  • File1.css
  • File2.css

Answer 1

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

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

    you rest of body

The last thing you need is the tailwind configuration file, which is automatically created when you run tailwind init in your working directory. The configuration file looks like this:

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

The purpose of this file is to check if any html file is using tailwind class and if so, render based on output.css when running the build command.