Tailwind-Starter

Commands to get started with Tailwind CSS

Step-1: Open a project folder/ working directory in an IDE.

Step-2: Inside that folder create two folders with names as- dist (for production) and src (for keeping code files), majority work we'll be doing in dist.

Step-3: Create index.html file inside dist folder.

Step-4: Open integrated terminal inside an IDE and type the following command:

#!/bin/bash
npx [email protected] init

this will create tailwind.config.js file in our working directory.

Step-5: Inside src file create a file named as- input.css , in which write following 3 lines in exact manner:

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

[!NOTE] It may show errors/problems due to linting, turn it off in settings.

Link this CSS file to the index.html created in an earlier step

Step-6: Inside tailwind.config.js file there would be an line beginning with content: [ ], write:

content: ["./dist/*.html"];

this would target all the .html file getting rendered.

Step-7: Open integrated terminal and run the following command:

#!/bin/bash
npx [email protected] -i./src/input.css -o./dist/style.css --watch

Congrats!!, You're ready to work with Tailwind CSS