The best way to setup Tailwind-CSS with Vite ?

Tailwind is a well-liked CSS framework that makes your Person Interface design making the method simpler. It offers low-level lessons and people lessons mix to create types for numerous elements.

Vite JS is a construct software that gives a quicker growth expertise for contemporary net initiatives. It simplifies the best way we construct and develops front-end net functions. It’ll create a localhost server to run your front-end net app and bundle your javascript, CSS, and property collectively for manufacturing. 

On this article, we are going to see the way to arrange Tailwind CSS with Vite. Earlier than continuing with putting in Tailwind CSS, be sure you have node and npm put in. If not, then check with the Set up of Node.js on Home windows/Linux article for the detailed set up procedures. 

Steps for putting in the tailwind CSS with the Vite.js software: Comply with the under steps to arrange a tailwind CSS with the Vite.js software:

Step 1: Create a mission folder

Create a folder and write the specified identify on that folder. Inside that folder, create an HTML file and add boilerplate code(use ! then press enter).

Step 2: Set up npm needed recordsdata

When you created a folder with an HTML file, then open the terminal on the mission’s root listing and sort the under command into the terminal. This command will merely generate an empty npm mission and Right here, -y stands for sure. A file named bundle.json was created. (This step may be skipped however I desire it to make use of)

npm init -y

Step 3: Putting in tailwind CSS together with vite.js

Run the next command on the terminal to put in all of the tailwind dependencies by way of vite. This command will create a node_modules folder and package-lock.json file.

npm set up -D tailwindcss postcss autoprefixer vite

Step 4: Create Tailwind config file

The under command will generate 2 config recordsdata named postcss.config.js and tailwind.config.js.

npx tailwindcss init -p

postcss.config.js

tailwind.config.js

Step 5: Including Tailwind directives

Now, create a model.css file, and inside that file, add the layer directives of tailwind CSS. As soon as all of the layer directives can be add in model.css, now, hyperlink the model.css file into your HTML file utilizing the <hyperlink> tag.

@tailwind base;
@tailwind elements;
@tailwind utilities;

Step 6: Updates in bundle.json

We have now created a bundle.json file (in step 2). This file comprises vital metadata about your mission and information your dependencies. 

“scripts”: {
   “check”: “echo ”Error: no check specified” && exit 1″
 },

Change the above strains of code with the strains under and don’t overlook so as to add a comma on the finish.

“scripts”: {
   “begin”: “vite”
 },

Step 7: Configure template paths

We have to replace the content material within the tailwind.config.js file so that it’s going to apply tailwind-CSS in all of the recordsdata.

Line to replace

content material: ["*"],

After updating the tailwind.config.js file:

Step 8: Test mission construction

Test the mission construction and all the required recordsdata. 

 

Step 9: Run the applying

To run the applying use the command npm run begin into the terminal.

npm run begin

The above line of code will generate a localhost server, & observe the server hyperlink to open the applying on the internet browser.

Step 10: Check Tailwind CSS with an instance

Now that we’ve efficiently arrange the tailwind-CSS and perceive the way to run the applying, now, we are going to check with a easy instance.

Instance: This instance illustrates the profitable execution of code after setup Tailwind-CSS with Vite software.

Output: To run the applying use npm run begin into the terminal.