Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide

As a beginner, I feel like I'm losing my mind trying to figure this out. I've watched countless tutorials and read through numerous documents, but still can't seem to get it working. Does anyone have any advice on how to successfully integrate tailwind (postcss or cli) with vite?

I want to use vanilla CSS with vite, alongside some tailwind, but I know that using the tailwindcss CDN is not recommended with vite.

First, I create my vanilla JS project with vite and then attempt to install tailwind following all the steps as instructed. However, when I run 'npm run dev,' I encounter various errors. It's frustrating!

htmlcssnpmtailwind-cssvite

Answer №1

Follow these steps to integrate Tailwind CSS with vite and Vanilla JS:

Create a new Vite project by running the command:
npm init vite@latest my-vite-project

Choose Vanilla option and select JavaScript when prompted.

cd my-vite-project

npm install

Install Tailwind CSS, PostCSS, and Autoprefixer using npm:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

This will generate a postcss.config file like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Now you can start your project by running:

npm run dev

Answer №2

To update your vite.config.js file, you can make the following adjustments:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing CSS styles dynamically using PHP

After stumbling upon a customizer live preview layout picker, I have finally found what I've been searching for – a live layout changer for WordPress. This solution works like a charm, but I'm wondering if there is a more efficient way to write ...

phpcsswordpress

How to execute a java class method within a JSP page

Is there a way to trigger a specific Java method when I click a button on a JSP page? I attempted using a scriptlet in the onclick event of the button to create an instance of the class and call the desired method, but unfortunately, it didn't yield t ...

javahtmljspmethods

What is the best way to eliminate all frames from the current windows using jQuery?

When transitioning to another page from my center frame, I need to ensure that the top and bottom frames are not visible in the new page. This will prevent my spinner or footer from showing up on the page I'm navigating to. Is it possible to achieve ...

javascriptjqueryhtml

Submitting POST data from a form to the current page

I am facing a rather complex issue. Currently, on a page, I have a form that collects information from my visitors. With the help of a script, I can grab this information and add it to a specific link. Initially, I used redirect.php to attach the data to ...

phphtmlformspost

Modal - sending data through URL

I am trying to create a modal that will open another view using a URL in script, but instead it just opens a blank pop-up and doesn't redirect to the URL. I have attempted various approaches, but none seem to be working. Adding <div class="modal-b ...

jqueryhtmlmodel-view-controllermodal-dialog

What causes an image background to take precedence over the background color of Bootstrap buttons?

Why is the CSS overriding the bootstrap button background styling and making it transparent instead of the default color? For example, if I have a button with the following styling in my document that sets the background-image of the entire body to an ima ...

htmlcsstwitter-bootstrap

What is the best way to eliminate the underline text decoration from a link element?

Take a look at this JS Bin. I want to change the link Project name in there. By default, it is underlined when hovered over. How can I remove that effect? I attempted using a class project-name: a:hover, a:focus .project-name { text-decoration: non ...

htmlcss

Creating an Innovative Grid Design with Varying Column Widths for Each Row

Seeking advice on achieving a specific layout using HTML. I have attempted to use HTML tables but struggled with creating rows with varying columns. Does anyone have recommendations for grid tools that may be more helpful? Thank you ...

htmlcsslayout

Traverse an SVG element using JavaScript

I have a beautiful star SVG that I created, and I want to use it instead of styling a span to create floating bubbles in my div. However, I'm facing some challenges in adapting my Javascript loop to incorporate the SVG for creating the bubbles, as opp ...

javascriptcsssvg

AWS and Azure are encountering difficulties in successfully executing the build process for a React application

Fixed: The issue was that I had saved my 10400 objects of JSON data as a .js array, causing the build to take too long (I just didn't know how to handle JSON). Switching it to .json format resolved the problem. I developed a React app that functions ...

node.jsreactjsamazon-web-servicesazurenpm

Step-by-step guide for setting up the componentjs builder

I'm encountering errors while trying to install componentjs to build a javascript library from github. I recently set up Node.js for Windows 64bits, and now when attempting to install either componentjs or component-builder, I am facing the following ...

node.jsnpm

Viewing the photo container before uploading while having text overlap

I'm encountering an issue where the image previews are overlapping with the text in another div. Here are the screenshots: the first one shows how it looks before the preview, and the second one shows what happens when images are added: https://i.sst ...

javascripttypescriptfile-uploadnext.jstailwind-css

Need help setting up automatic audio playback on your Android device?

I'm aware that autoplay of audio is not supported on Android devices. However, I recently found a website that successfully autoplays music on an Android device: Can someone explain how this is being achieved? ...

javascriptjqueryhtmlthree.jspixi.js

The issue with the Angular custom checkbox directive arises when using it within an ng-repeat

A personalized directive has been developed for checkboxes that is applicable throughout the application. The code for creating the checkbox is as follows: JS angular.module("myApp") .component("ngCheckbox", { template: '<di ...

javascripthtmlcssangularjscheckbox

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

htmlcsshtml-table

Achieving Content Centering in React Material UI: A Guide to Aligning to the Middle of the Page

Currently, the button is displaying in the top left corner. How can I move the button to the center of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</ ...

cssreactjsmaterial-ui

When an element possesses a particular class, modify the css styling of a different

My menu is an unordered list, with each menu item gaining the "active" class when clicked. This works perfectly fine. However, I have an arrow positioned absolutely and its "top" style needs to change based on which list item has the "active" class. Curr ...

jqueryhtmlcssconditional-statements

Sending FormData from React.js to an Express.js backend results in loss of data

I encountered a problem while developing a book library management CRUD system using React v18. The issue arises when attempting to add data to my MongoDB Atlas database. Whenever I pass the formData to axios.post through Redux, the req.body on the backend ...

javascripthtmlnode.jsreactjsexpress

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

javascriptjqueryhtml

What is the best way to use a jQuery variable within a .css() function

I'm working on a typewriter effect with some advanced CSS code. I need the program to calculate the length of a PHP variable and adjust the cursor animation steps accordingly. Basically, I want the cursor movement in the animation to be determined by ...

phpjqueryhtmlcss