DEV Community

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

Posted on

3

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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more