DEV Community

Cover image for Setup Tailwind in your Vite Project with this one command
Sanjay R
Sanjay R

Posted on

Setup Tailwind in your Vite Project with this one command

Hi guys, setting tailwind in your Vite projects may take two to three steps. 
For example in Vite React,

  • You need to install the tailwind.
  • Generate the config files.
  • Add the template to those files.

But I have created an npm package that sets up Tailwind with a single command in your project. It will install the Tailwind, generate the config file, and add the templates to it automatically.

Installation:

npm install -g lazywind
Enter fullscreen mode Exit fullscreen mode

Install the package globally. 

then run,

lazywind
Enter fullscreen mode Exit fullscreen mode

run this command in your project directory.

Example:

Now let's set up a React Project using Vite

Setup react,

npm create vite@latest client -- --template react

cd client

npm install
Enter fullscreen mode Exit fullscreen mode

After setting up React and installing the dependencies, you can run the project using:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Set up Tailwind with Lazywind

Hope, you installed lazywind globally, Now run lazywind in your project folder, for example, client is the folder in this case.

It will,

  • Install Tailwind CSS
  • Generate the tailwind.config.js and postcss.config.js files
  • Add the necessary templates.

That's it, with just a single command.

Package link: https://www.npmjs.com/package/lazywind

Your Tailwind setup is now complete. Test it out and let me know your feedback - I'd love to hear it!

Top comments (0)