Скачать или смотреть How to Use TailwindCSS with Vite in Vanilla JavaScript

Discover a step-by-step guide to integrate `TailwindCSS` with Vite for pure JavaScript projects. Simplify your styling setup with a clean configuration.
---
This video is based on the question https://stackoverflow.com/q/77741027/ asked by the user 'Gurur Kısaoğlu' ( https://stackoverflow.com/u/23180287/ ) and on the answer https://stackoverflow.com/a/77741406/ provided by the user 'MrStranger' ( https://stackoverflow.com/u/20404911/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: How to use TailwindCSS with Vite? (not react or something just vanilla JS)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use TailwindCSS with Vite in Vanilla JavaScript

Are you a newbie feeling overwhelmed by integrating TailwindCSS with Vite? You are not alone! Many developers embark on this journey and face challenges, especially when using vanilla JavaScript. The combination of modern tools like Vite and TailwindCSS can seem daunting at times, but the good news is that it's completely doable! In this guide, we'll break down the process into simple steps so you can start styling your projects effortlessly.

Setting Up Your Vite Project

Let's begin with the setup of your new Vite project. Follow these commands carefully:

Step 1: Create a New Vite Project

Open your terminal and run the following command to initialize a new Vite project:

[[See Video to Reveal this Text or Code Snippet]]

Choose Vanilla: When prompted, select the "Vanilla" option.

Choose JavaScript: Next, select JavaScript as your scripting language.

Step 2: Navigate to Your Project Directory

Once your project is created, navigate to your project directory by executing:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Install Dependencies

Now, you need to install the initial npm dependencies:

[[See Video to Reveal this Text or Code Snippet]]

Installing Tailwind CSS

With your project set up, the next step is to add TailwindCSS. This will enable you to use Tailwind’s utility-first CSS approach.

Step 4: Install Tailwind CSS and Dependencies

Run the following command to install Tailwind CSS along with PostCSS and Autoprefixer, which are necessary for processing the CSS:

[[See Video to Reveal this Text or Code Snippet]]

Step 5: Initialize TailwindCSS Configuration

This command will create a default tailwind.config.js file along with a postcss.config.js file:

[[See Video to Reveal this Text or Code Snippet]]

Configuring PostCSS

Next, you need to configure PostCSS to work with Tailwind.

Step 6: Edit the PostCSS Configuration

Create or edit the postcss.config.js file in the root of your project with the following content:

[[See Video to Reveal this Text or Code Snippet]]

This configuration tells PostCSS to use both Tailwind and Autoprefixer, which adds vendor prefixes to your CSS properties automatically.

Running Your Project

All set? It’s time to see your project in action!

Step 7: Start the Development Server

Run your project using:

[[See Video to Reveal this Text or Code Snippet]]

This command will start your Vite development server. You should now be able to see your project running locally, and you can begin using TailwindCSS styling in your HTML.

Conclusion

Integrating TailwindCSS with Vite may take a little effort at first, but once you follow these steps, you'll have a solid foundation to build from. Here's a quick recap:

Create a new Vite project and select Vanilla JavaScript.

Install Tailwind CSS along with PostCSS and Autoprefixer.

Configure PostCSS to use Tailwind and Autoprefixer.

Run your project and start styling!

Don’t forget to check out the TailwindCSS documentation for more utilities and customization options. Happy coding!