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