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

Installation

yarn
Enter fullscreen mode Exit fullscreen mode

Development

yarn dev
Enter fullscreen mode Exit fullscreen mode

Build

yarn build
Enter fullscreen mode Exit fullscreen mode

19