Html Question posted in
Some basic documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    I understand that starting with a new tool can be challenging. Let’s address the issues you’re facing with Tailwind CSS.

    Issue with Tailwind CLI:
    You need to specify the correct source files for Tailwind processing. In your configuration file tailwind.config.js, you specified content: [‘./build/*.html’], but there is no build folder in your project structure. Try changing it to content: [‘./index.html’] to point to your web page file.

    Styles Compilation:
    You also encountered an issue with running the Tailwind CLI using the command npx tailwindcss -i ./src/input.css -o ./build/css/style.css –watch. Perhaps you are missing the postcss-cli package. Install it with the following command:

    bash: npm install -g postcss-cli

    Then try using the command:

    bash: npx tailwindcss build ./src/input.css -o ./build/css/style.css –watch

    This command generates a CSS file based on your source files.

    Style Inclusion:
    Ensure that your style file is linked to your HTML document. In your case, the file style.css should be in the ./css/ folder, so your link should look like this:

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

    After making these changes, your Tailwind CSS styles should start working. Try executing these steps and let me know the results!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search