Setup windicss for Solidjs

Windicss is the next generation utility CSS framework, for me it is like a simplified tailwind with some jet pack features, it is awesome 😂 

 

Let's configure Windicss for Solidjs project. We are going through following steps.

• Initialize/create Solidjs a project
• Install dependencies
• add vite plugin🔌
• Configure vite config
• Add windicss to entry point file.

First up all create a new project add all dependecies for Solidjs and windicss.

npx degit solidjs/templates/js my-app
yarn install 

Let's install vite plugin 🔌 I

npm i -D vite-plugin-windicss windicss

vite.confiig.js

In the configuration file fill the content section.

//vite.confiig.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

Last step

Import the windicss to the entry point file , index.jsx

/* @refresh reload */
import { render } from 'solid-js/web';
import 'virtual:windi.css'

import './index.css';
import App from './App';

render(() => <App />, document.getElementById('root'));

Now we can try windicss in our component just like

<p class="text-4xl text-red-400 tracking-widest">

hit yarn dev and see what is happening 🚀