Tailwind doesn't work in Solid JS

[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:

PS. Index.css file has already been imported inside Index.tsx

I dont understand what the issue is am i missing something?
any help is appreciated

[wongjn]

Did you use a Vite project template to scaffold your project? The guide does suggest using one of these, and I believe the steps are based on this assumption so the steps may not work if you did not use a Vite template. Either way, if you could provide a remote-hosted git repository, we can look at troubleshooting further for you.

[falcon-Z]

Did you use a Vite project template to scaffold your project?

Yes, i did, exactly as suggested in the documentation.

Repository:
https://github.com/falcon-Z/podcasts

[wongjn]

Thank you for providing the repository. I have had a look at it seems the Framework guide instructions for SolidJS weren't followed exactly – it seems the npx tailwindcss init -p command was not run since there is no postcss.config.js file in the root of the project. You should be able to run the npx tailwindcss init -p and it should create a postcss.config.js file for you with the content that you need in it to get Tailwind working.

[falcon-Z]

it seems the npx tailwindcss init -p command was not run

Thanks, that fixes it i must have forgotten to include the -p flag