Install Tailwind CSS with SolidJS

Setting up Tailwind CSS in a SolidJS project.

Create your project

Start by creating a new SolidJS project if you don't have one set up already. The most common approach is to use the SolidJS Vite template.

Terminal

npx degit solidjs/templates/js my-project
cd my-project

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Add the @tailwindcss/vite plugin to your Vite configuration.

vite.config.ts

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    solidPlugin(),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

Import Tailwind CSS

Add an @import to ./src/index.css that imports Tailwind CSS.

index.css

@import "tailwindcss";

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

App.jsx

export default function App() {
  return (
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}