Install Tailwind CSS in Solid and Vite

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 = {
  purge: ['./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:

GitHub logo wobsoriano / vite-solid-tailwind-starter

Starter using Vite + Solid + Tailwind CSS

Vite + Solid + Tailwind CSS starter

Inspired by posva's vite-tailwind-starter

Note if you have access to Tailwind UI, you can follow the following steps to add it:

  1. Install @tailwindcss/ui:
yarn add @tailwindcss/ui
Enter fullscreen mode Exit fullscreen mode
  1. Add the plugin in tailwind.config.js without changing anything else:
// tailwind.config.js
module.exports = {
  // ...
  // rest of the config
  plugins: [require('@tailwindcss/ui')],
Enter fullscreen mode Exit fullscreen mode


Enter fullscreen mode Exit fullscreen mode


yarn dev
Enter fullscreen mode Exit fullscreen mode


yarn build
Enter fullscreen mode Exit fullscreen mode