Configure TailwindCSS in Svelte Kit

 TailwindCSS can be configured in Svelte Kit. Install the dependencies first 🤜.

 

npm install -D tailwindcss postcss autoprefixer svelte-preprocess

npx tailwindcss init tailwind.config.cjs -p 

 Configure the the Tailwind config content key with the following 

//tailwind.config.cjs

content: ['./src/**/*.{html,js,svelte,ts}'], 

Create app.css file and import Tailwind classes and utilities.

//app.css

@tailwind base; @tailwind components; @tailwind utilities;

Import the app.css in +layout.svelte file.

<script> import "../app.css"; </script> <slot /> 

Lets test some style

<h1 class="text-3xl font-bold underline"> Hello world! </h1>

Now it should working. 🤔

 Read more TailwindCSS guides

Read More

How to use tailwindcss in Solidjs

 CSS is the most important part of UI development. There are lots of frameworks and libraries such as bootstrap, bulma to make thing easier. Each on has its own use cases.

I prefer using TailwindCSS, it help me to build responsive layout and utility approach save a lot of time and code. 

How do we use tailwindCSS in Solidjs ? We have two options one is use the Tailwind with handy 🖐 features, WindiCSS or go with Latest Tailwind features.

Tailwind   

Configuring Tailwind on Solidjs is similar to Reactjs. We have to go through

• Install dependencies
• Generate config and configure content section
• Integrate classes and components

A detailed guide is here , in case you need them.

WindiCSS

WidniCSS comes with vite configuration, it is make thing easier for Solidjs users. Here is the guide required.

Read More

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

Read More