I can't get tailwind to work in my fullstack project

Question

I have been trying to make my tailwind to work in my fullstack application, I am using Vite to work with React, Node.js and I want to use express also. This are my files so far

For the component that I want to manipulate with tailwind Header.jsx

import logo from '../images/ID-logo.png';

function Header() {
    return (
        <header className="w-full relative">
            <div className='flex mb-1'>
                {/* Adjusted image size for better visibility */}
                <img src={logo} className="w-20 h-20 ml-3" alt="Logo" />
                <ul className="outline outline-blue-600">
                    {/* Consider using <Link> or <NavLink> from react-router-dom if you're using React Router */}
                    <li><a href="#" className="text-white text-2xl font-bold">Inicio</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Nosotros</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Servicios</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Galeria</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Contacto</a></li>
                    <li><a href="#" className="text-white text-2xl font-bold">Preguntas frecuentes</a></li>
                </ul>
            </div>
        </header>
    );
}

export default Header;

postcss.config

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

package.json

{
  "name": "my-fullstack-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "vite": "^5.3.1"
  }
}

vite.config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Global CSS

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

App.jsx

import './styles/index.css'
import Header from './components/Header'

function App() {

  return (
    // <DarkModeProvider>
      <Header />
    // </DarkModeProvider>
  )
}

export default App

What I have tried is

To reinstall the npm dependencies
Check the paths (They are good)
Tried different dimensions for the img element (None are working)

You should follow the instructions tailwindcss.com/docs/guides/vite. I think you missing the tailwind.config.js file. — Minh
– Minh, Commented Jun 25, 2024 at 3:11

JayDev95 · Accepted Answer · 2024-06-25 03:09:40Z

1

You didn't list the paths for Tailwind to scan through. Tailwind CSS needs to know which files to scan for class names to generate the necessary styles. The content listing is essential.

You can read more about this setting here.

Tailwind content configuration

See an example below.

/** @type {import('tailwindcss').Config} */
export default {
  content: [ // Place your paths here
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

answered Jun 25, 2024 at 3:09

JayDev95

1,1473 gold badges10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emilio Parra Over a year ago

Thank you very much, I knew it would be something simple. I won't forget this.

JayDev95 Over a year ago

Anytime, happy to help!

Jason Chang · Accepted Answer · 2024-06-25 03:08:44Z

0

Do you have a tailwind.config.js file?

try npx tailwindcss init, the file looks like:


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

answered Jun 25, 2024 at 3:08

Jason Chang

445 bronze badges

Collectives™ on Stack Overflow

I can't get tailwind to work in my fullstack project

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related