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:
- Install
@tailwindcss/ui
:
yarn add @tailwindcss/ui
- 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
Top comments (2)
For TypeScript + TailwindCSS:
For TypeScript, use this one instead