Using Tailwind CSS in Visual Studio

Install Tailwind CSS

Navigate to your project folder and run the following command:

npm install -D tailwindcss

Create Tailwind CSS Configuration File

npx tailwindcss init

Modify the Configuration File

Specify the target files (e.g., html) in 'content'.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./src/**/*.{html,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

Create a CSS File

Adding the --watch option enables auto-generation mode (the command prompt will not close).

npx tailwindcss -i ./src/input.css -o ./src/styles/tailwind.css --watch

Reference

Tailwind CSS for Beginners: A Guide for First-Timers Amid Exploding User Growth - Basic Edition