What is the process for adding tailwind CSS via npm?

Question

What is the process for adding tailwind CSS via npm?

Before, I was including Tailwind using a CDN. Now, I have installed it with npm and all three .css files are included, but the styles are not appearing in my HTML document.

Here is the directory structure and a link to style.css

The content of tailwind.config.js looks like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

The package.json includes Tailwind CSS version 3.3.3.

All paths to the .css files for Tailwind are correct (base, components, utilities) and I can see successful requests in the network tabs.

I have checked links, paths, package.json, and tailwind.config.js files, everything appears to be in order. Why are the styles still not being applied? Note that I am using simple CSS and not SCSS/SASS.

css npm tailwind-css

Answer 1

Answer №1

To get started, follow these steps:

npm install npm install -D tailwindcss postcss autoprefixer vite

In your package.json file:

scripts: {
 "start": "vite",
 "build": "vite build"
}

Your custom tailwind.config.js configuration should look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Don't forget to link your stylesheet by adding the following line to your HTML file:

<link href="./style.css" rel="stylesheet" >

Answer 2

To get started, follow these steps:

npm install npm install -D tailwindcss postcss autoprefixer vite

In your package.json file:

scripts: {
 "start": "vite",
 "build": "vite build"
}

Your custom tailwind.config.js configuration should look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Don't forget to link your stylesheet by adding the following line to your HTML file:

<link href="./style.css" rel="stylesheet" >

What is the process for adding tailwind CSS via npm?

Answer №1

Similar questions

Maintain the scrollable feature of the element until the final content is reached

`It is important to note that in Tailwind CSS, `h-8` does not supersede `h-4

npm throwing a "Permission denied" error

An effective method to arrange divs in a line adjacent to each other

Ways to implement CSS styling for a particular HTML element

What is the process by which npm consolidates the dependencies when multiple versions of the same dependency are needed?

Is it possible to leverage Apple Pay within the Expo app to create a unique payment token?

Creating a Website Optimized for Mobile Devices

Having trouble utilizing Vue CLI 3

Unable to adjust the width of a table column within a horizontally scrollable container

I am unsure about implementing the life cycle in Svelte.js

Is there a way for me to simultaneously run a typescript watch and start the server?

The error message encountered on Github Actions appears as follows: "bash: line 3: npm: command not

Let us know when the information on a different tab is updated

Issue: The module 'xdl' cannot be located while executing the command "npm start" in React Native

Why is it that I am limited to running globally installed packages only?

Ways to make text within a container smoothly slide down

The installation process for Cordova 4.0.0 is completing the setup for version 3.6

Troubleshooting Issue: Unable to Collapse Bootstrap Responsive Navbar Button with Custom CSS Modifications

Allow frontend JavaScript to retrieve a text file that is restricted to individual users