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 which contains all Tailwind launchers @tailwindbase; @tailwindcomponents; @tailwindutilities; or in separate files like: index.css file 1.css file 2.css

P粉001206492 · Answer

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.