New to Tailwind CSS, how do I get my Tailwind to display to my simple webpage?

Question

New to Tailwind CSS, how do I get my Tailwind to display to my simple webpage?

149 views Asked by Slater Colt At 14 January 2024 at 20:30

I'm new to Tailwind CSS (first project) and I feel like I'm missing a basic step in getting my Tailwind to work properly.

I have my Project Folder Structure:

Lesson01

build (folder)
css (folder)
style.css
index.html
src
input.css
tailwind.config.js

I'm trying to make an emerald colored div box with some different classes applied for shadows and making the object a full circle. Nothing too crazy yet.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body class="min-h-screen grid place-content-center">
  <div class="bg-emerald-500 w-52 h-52 rounded-full shadow-2xl"></div>
</body>
</html>

tailwind.config.js

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

style.css is the output of the generated base Tailwind css file.

input.css contains the initial layers for Tailwind CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

I'm new to Tailwind but I would love to learn and apply it for my home projects that I'm experimenting with. Any advice would be much appreciated!

I tried running

npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch

in the terminal to update the style.css file using the input.css file.

However, I didn't see any expected results. I did get hit with this:

Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

Done in 58ms.

So the issues I'm hitting are for sure due to my noviceness with Tailwind haha.

Any help would be appreciated and I'm new to posting on StackOverflow as well!

Original Q&A

There are 1 answers

**Wongjn** · Answer 1 · 2024-01-14T20:45:44+00:00

Tailwind is not using the configuration file at src/tailwind.config.js that you might be expecting. By default, Tailwind looks for a configuration file in the root of the project. For solutions, you could:

Move the src/tailwind.config.js file to the root of your project.

Load your src/tailwind.config.js via the @config directive in your src/input.css file:

@config "./tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

Also, you state your index.html is in build/css/index.html so you'd need to add this to your content:

module.exports = {
  content: [
    './build/*.html',
    './build/css/index.html',
  ],

And fix the path to the CSS file in index.html:

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

TechQA.

New to Tailwind CSS, how do I get my Tailwind to display to my simple webpage?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in TAILWIND-CSS

Related Questions in TAILWIND-3

Popular Questions

Popular Tags

Trending Questions