Sunday, January 29, 2023
HomeSoftware Developmentsetup Tailwind-CSS with Vite ?

setup Tailwind-CSS with Vite ?


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

Vite JS is a construct instrument that gives a sooner growth expertise for contemporary internet initiatives. It simplifies the best way we construct and develops front-end internet purposes. It should create a localhost server to run your front-end internet app and bundle your javascript, CSS, and belongings collectively for manufacturing. 

On this article, we’ll see tips on how to arrange Tailwind CSS with Vite. Earlier than continuing with putting in Tailwind CSS, be sure to have node and npm put in. If not, then confer 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 challenge 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 crucial recordsdata

When you created a folder with an HTML file, then open the terminal on the challenge’s root listing and kind the under command into the terminal. This command will merely generate an empty npm challenge and Right here, -y stands for sure. A file named bundle.json was created. (This step will 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 means 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

Javascript

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  },

}

tailwind.config.js

Javascript

  

module.exports = {

  content material: [],

  theme: {

    lengthen: {},

  },

  plugins: [],

}

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 will probably 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

Now we have created a bundle.json file (in step 2). This file incorporates essential metadata about your challenge and information your dependencies. 

“scripts”: {
   “take a look at”: “echo ”Error: no take a look at 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.

Javascript

  

module.exports = {

  content material: [],

  theme: {

    lengthen: {},

  },

  plugins: [],

}

Line to replace

content material: ["*"],

After updating the tailwind.config.js file:

Javascript

  

module.exports = {

  content material: ["*"],

  theme: {

    lengthen: {},

  },

  plugins: [],

}

Step 8: Examine challenge construction

Examine the challenge construction and all the required recordsdata. 

 

Step 9: Run the appliance

To run the appliance 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 appliance on the internet browser.

Step 10: Take a look at Tailwind CSS with an instance

Now that we have now efficiently arrange the tailwind-CSS and perceive tips on how to run the appliance, now, we’ll take a look at with a easy instance.

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

HTML

<!DOCTYPE html>

<html lang="en">

  

<head>

    <meta charset="UTF-8">

    <meta identify="viewport" 

          content material="width=machine-width, 

                         initial-scale=1.0">

    <title>Setup Tailwind-CSS with Vite</title>

    <hyperlink rel="stylesheet" href="model.css">

</head>

  

<physique>

    <div class="flex justify-center 

                items-center min-h-screen ">

        <div class="bg-green-700 p-8 text-3xl 

                    rounded-2xl shadow-2xl">

                    GeeksforGeeks Studying!

        </div>

    </div>

</physique>

  

</html>

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

 

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments