Tailwind CSS

1. Open the embedded Terminal (Ctrl0`) .

2. Switch to the directory of the project where your integrate Tailwind support. Normally, this is the directory where the .csproj file of your project is located.

3. To set up a new npm package and create the package.json file, type:

   npm init -y

4. To install Tailwind CSS, type:

   npm install -D tailwindcss@3

5. To generate a configuration file, type:

   npx tailwindcss init

   As result, a tailwind.config.js configuration file is created in the root of your project.

   module.exports = {
     content: [],
     theme: {
       extend: {},
     },
     plugins: [],
   }

6. Open the tailwind.config.js and specify files that use Tailwind CSS classes in the content[] section.

   For example, you can cover all HTML-like files in a Blazor project like this:

   content: ["./src/**/*.{razor,html,cshtml}"],

   In an ASP.NET MVC project, it will look like this:

   content: ["./Pages/**/*.cshtml", "./Views/**/*.cshtml"],

7. Set up a source Tailwind CSS file. You can put it anywhere in your project. For example, let's create a Styles folder at the project root and then create a source.css in that folder with the following contents:

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

8. To add an npm script that generates the output CSS file, open package.json in the project root and add css:build script into the scripts section. It will look like this:

   "scripts": {
     "css:build": "npx tailwindcss -i ./Styles/source.css -o ./wwwroot/css/styles.css --minify"
   },

9. To update the output CSS each time you build or run your project, integrate the npm script into your project build script: select your project in the solution explorer and press F4 to open its .csproj file, then add the following items there:

   <ItemGroup>
     <UpToDateCheckBuilt Include="Styles/source.css" Set="Css" />
     <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
   </ItemGroup>
   
   <Target Name="Tailwind" BeforeTargets="Build">
     <Exec Command="npm run css:build"/>
   </Target>

10. Link the output CSS in the views of your project, for example, in _Layout.cshtml:

    <link rel="stylesheet" href="~/css/styles.css" asp-append-version="true" />
                        ]

Learn more from the Tailwind CSS version 3 official website and from the Khalid Abuhakmeh's tutorial.

1. Press CtrlAlt0S to open settings and then select Languages & Frameworks | Style Sheets | Tailwind CSS.

2. In the includeLanguages property, add contexts where you want to get completion for Tailwind classes. Use the following format:

   • "slim": "slim"

   • "haml": "haml"

   • "jte": "html"

   • "kte": "html"

3. To enable Tailwind class completion in Slim templates and .haml files, set the emmetCompletions property to true.