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

Steps to make a unique custom tooltip without using jQuery by utilizing the title attribute

Facing difficulties in setting up ionic 3 project

Access NodeJS libraries from different directories instead of the default "node_modules" folder without relying on relative paths

Rendering the navbar based on conditions

Checking the opacity with an if/else statement, then adding a class without removing the existing class

Ways to implement logging in an NPM package without the need for a specific logging library

Why isn't my CSS float behaving as I anticipated?

To access the link, simply click once if there is no child menu. However, if there is a child menu attached, be sure to click

Package.json failing to enable NodeJS unsafe-perm functionality

Dynamic banner featuring animated text, automatically resizing divs based on width while maintaining body width

Disallowing the usage of npm unpublish on a user's device

Trouble getting CSS to load in Webpack

No updates are appearing on Github despite a significant push

Content obscuring dropdown menu

The command npm start is failing to launch any React application

Issues occur with Google visualization when the screen is resized

Trouble aligning a div at the center within another div using margin auto

Hide only the table that is being clicked on, not all tables

Homebrew on Mac - updating Node version does not automatically update NPM version

Ways to conceal a child div element without using any specific ID reference