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 = {
  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:

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

2. Add the plugin in tailwind.config.js without changing anything else:

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

Installation

yarn

Development

yarn dev

Build

yarn build

View on GitHub

Comments

[Abdullah Al Nahid]

For TypeScript + TailwindCSS:

npx degit solidjs/templates/ts-tailwindcss my-app

[Robert]

For TypeScript, use this one instead

npx degit solidjs/templates/ts my-app