DEV Community

Robert
Robert

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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

cd my-app
npm install # or yarn or pnpm
Enter fullscreen mode Exit fullscreen mode

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

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

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

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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"));
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
abdnahid profile image
Abdullah Al Nahid • Edited

For TypeScript + TailwindCSS:

npx degit solidjs/templates/ts-tailwindcss my-app
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wobsoriano profile image
Robert • Edited

For TypeScript, use this one instead

npx degit solidjs/templates/ts my-app
Enter fullscreen mode Exit fullscreen mode