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

How to use environment variables in Solidjs [vitejs]

 Environment variables can be used in JavaScript application (Nodejs) to store information such API SECRETS. 

Reactjs has inbuilt capacity to consume .env files while Solidjs have to go through vite config..

First up all create .env file at the project root with some information .

API_URI = SOME SECRET

 Configure in vite.config.js

Add a define key ⚿ to the configuration settings as follows in vite.config.js file 📂.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
// vite config
define: {
API:JSON.stringify('https://jsonplaceholder.typicode.com/posts'),
APP_ENV: JSON.stringify(env.API_URI)
},
plugins: [solidPlugin()],
build: {
target: 'esnext',
polyfillDynamicImport: false,
},
}
})

Read Official Doc on vite more information ℹ

 

Read More

How to create global variable in vitejs [Solidjs]

 Vitejs is build tool for modern nodejs applications. Global variable requires in any application where common information need to be accessed in different modules. 

It is common practice is that store values such as URL, KEYS in separate files, in such cases we can use either environment variable or project level symbols.

Read More