Tailwind CSS not working

[falcon-Z]

hey there,
I am very new to Solid and i wanted to use Tailwind CSS so, i set things up as recommended in Tailwind Docs

1. Installed Tailwind
   yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Tailwind Config

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

3. setup tailwind in Index.css

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

4. My App.tsx

import type { Component } from "solid-js";

const App: Component = () => {
  return (
    <div class="bg-black h-full">
      <p>Home</p>
    </div>
  );
};

export default App;

Result:

I tried running the application both with dev and build commands but it just seems like Tailwind CSS is not compiled and does not generate necessary CSS.
I am sure i am missing something very obvious here 🤔 should i build tailwind css separately with tailwind CLI? I am not sure

Any help would be appreciated,

[lxsmnsyc]

This is not related to SolidJS but to help you: you need to add import './Index.css'; somewhere

[falcon-Z]

thanks, But it is imported in Index.tsx

/* @refresh reload */
import { render } from 'solid-js/web';

import './index.css';
import App from './App';

render(() => <App />, document.getElementById('root') as HTMLElement);

This is why i am confused

[falcon-Z]

i had it fixed, it seems like i forgot to add -p while initializing with tailwind CLI wich was the cause. Anyway, thank u so much for trying to help

[whoiscarlo]

What's strange in my case is that even without the that import statement, a number of pages had tailwind rendering perfectly, but on any new page it wouldn't work. Which doesn't make any sense to me.

Anyways though, thank you for this!

[tomptaylor]

I'm also seeing inconsistency with classes showing up.