Here's a quick guide on setting up Tailwind in your Solid project.

First, generate a Solid + Vite app if you don’t have one set up already.

npx degit solidjs/templates/js my-app

Navigate to the project directory and install the dependencies using npm or yarn or pnpm.

cd my-app
npm install # or yarn or pnpm

Next, we'd need to install tailwind and its dependencies (PostCSS & autoprefixer).

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, generate your tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

This will create two files in your root directory: tailwind.config.js and postcss.config.js.

Open the tailwind.config.js file and update the purge property to include the path to our src folder and index.html file.

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, we’ll import Tailwind’s styles using the @tailwind directive within our entry CSS file:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, ensure your CSS file is being imported in your ./src/index.js file:

import { render } from "solid-js/web";

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

render(() => <App />, document.getElementById("root"));

You're finished! Now when you run npm run dev, Tailwind CSS will be ready to use in your Solid and Vite project.

Here's a Vite + Solid + Tailwind starter with Routing configured for you:

yarn add @tailwindcss/ui

// tailwind.config.js
module.exports = {
  // ...
  // rest of the config
  plugins: [require('@tailwindcss/ui')],
}

yarn

yarn dev

yarn build