Forem: Nostro

highsea : color shades generator for tailwindcss - #2 : now with darkmode and palette builder

Nostro — Wed, 05 Jan 2022 11:56:33 +0000

New features added to highsea - a color shade generator for tailwindcss.

Darkmode

Your eyes will probably be grateful. The palette background is black - while it may be a bit intense, a color-neutral neighbour is necessary to better judge the shades.

For the same reason, the palette background is white in lightmode.

Palette builder

In the first version of highsea, you could only get the hex the codes for one given color at a time.

The palette builder allows you to add/remove your custom colors, as well as the tailwind default colors so that you can choose your full palette right here and copy all the codes.

Grays are not (yet) customizable, but they're included for reference if you want to see them next to your other colors - same goes for black and white.

highsea : color range generator for tailwindcss

Nostro — Fri, 24 Dec 2021 17:10:08 +0000

If you like using tailwindcss, every now and then you find yourself in the position of wanting to use a specific shade, but no default color in the tailwindcss range does fit the bill, it's too greenish or to reddish or too whatnot - it just doesn't work.

From there, either you build your own range manually, or find some some code somewhere that generate them.

I didn't find anything easy enough for my liking, so I built it.

Here comes highsea, it's very barebones for now in terms of features, but it nails the heart of the matter: generate a 50-900 range for any hue, while still fitting with the existing range should you want to combine custom and default on the same project.

More features will be added later on; in the meantime enjoy !

Deploying to Heroku with SvelteKit

Nostro — Mon, 06 Dec 2021 17:02:34 +0000

If you're trying to deploy with the built-in adapter-auto, you will probably encounter an E10 error and/or a R10 error with svelte-kit not found. This post details how to correct them.

The other option is to use the adapter-node which is what we'll do here; you can read about adapters in the SvelteKit docs

You may also be interested in
SvelteKit + .env
SvelteKit + TailwindCSS

Create a svelte app

npm init svelte@next my-awesome-app
cd my-awesome-app
npm i @sveltejs/adapter-node@next

Modify the config file to use the right adapter

svelte.config.js

// Change
- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-node';

// Make sure this is present
const config = {
    kit: {
        adapter: adapter(),
    },
};

Add a start script and specify the `node` version required

SvelteKit template does not have a start script, which will be looked for by Heroku.

Also, at time of writing Heroku defaults to node 14.1 if there is no indication otherwise, and the build may fail if your version is different.

package.json

    "engines": {    
        "node": "16.x",
        "npm": "8.x"
    },
    "scripts": {
        "start": "node build/index.js",
    },

Depending on your case, the npm version may not be strictly necessary for the build to succeed.

Create the Heroku app

You should have the Heroku CLI installed and be logged in; otherwise install it and run heroku login

This creates the app at my-awesome-app.herokuapp.com - if the name isn't available the command will fail. If you omit the name you will get assigned a random poetic name by Heroku.

heroku create my-awesome-app
git add . && git commit -m "My commit message"
git push heroku main

By default this create the app in the US region; to do it in the EU run heroku create my-awesome-app --region eu

Once the build finishes, your app will be deployed at my-awesome-app.herokuapp.com or random-poetic-name.herokuapp.com

Using environment variables with SvelteKit

Nostro — Sat, 04 Dec 2021 17:56:24 +0000

Because SvelteKit comes with Vite, using .env may be a bit unfamiliar. There are two ways to go about it, either with Vite's import.meta.env out of the box or with the usual suspect process.env that requires a bit more setting up.

You may also be interested in
SvelteKit + TailwindCSS
SvelteKit + Heroku

Using `import.meta.env`

Full information is available in the official docs but the gist of it is that you should prefix any variable that you want exposed to your client with VITE_

It means import.meta.env.FOO will not be exposed client-side, while import.meta.env.VITE_FOO will be.

.env

FOO=BAR
VITE_FOO=BAR

browser

console.log(import.meta.env.FOO)
// undefined


console.log(import.meta.env.VITE_FOO)
// BAR

Using `process.env`

If for some reason you still want to use process.env, because you're used to it or you don't feel like renaming all your variables VITE_SOMETHING, you can also do it with the env-cmd package.

npm i env-cmd

Then modify your config in svelte.config.js

svelte.config.js

const config = {
    kit: {    
        vite: {
            define: {
                'process.env': process.env,
            },
        },
    },
};

And finally add env-cmd to your dev script

package.json

{
    "scripts": {
        "dev": "env-cmd svelte-kit dev",
        },
}

And now you'll be able to access process.env in your client

.env

FOO=BAR

browser

console.log(process.env.FOO)
// BAR

Using TailwindCSS with SvelteKit

Nostro — Sat, 04 Dec 2021 17:30:00 +0000

Setting up SvelteKit with TailwindCSS is now more straightforward than it used to be even a couple of weeks ago. Still, you may look around more than necessary find how to do it, so here is the basic setup.

Updated 20th Aug 2022 - The original content has been left at the end of the post if you're on earlier versions of SvelteKit

SvelteKit docs
TailwindCSS docs

You may also be interested in

SvelteKit + .env
SvelteKit + Heroku

Updated content

Create a svelte app

npm create svelte@latest my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

Note: Official tailwind docs make you install svelte-preprocess, but at time of writing it's included in the skeleton

Update the config files

svelte.config.js

import preprocess from "svelte-preprocess";

const config = {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Remove boilerplate CSS (if using demo template) or create `app.css` in the `src` root if using skeleton

app.css

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

Create `./src/routes/+layout.svelte` if using skeleton or check it if using demo template

+layout.svelte

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

<slot />

Original content

Create a svelte app

npm create svelte@latest my-app
cd my-app
npx svelte-add@latest tailwindcss
npm i

Remove boilerplate CSS (if using demo template) or create `app.css` if using skeleton

app.css

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

Using tailwind colors

With the 3.x release, all colors are included. If you want to add your custom ones, or rename the ones that tailwind provides, you can do so in the config file:

tailwind.config.cjs

//Add on top
const colors = require('tailwindcss/colors');

//Add in config
colors: {
    white: colors.white,
    black: colors.black,
    red: colors.red,
    orange: colors.orange,
    amber: colors.amber,
    yellow: colors.yellow,
    green: colors.green,
    lime: colors.lime,
    emerald: colors.emerald,
    teal: colors.teal,
    cyan: colors.cyan,
    sky: colors.sky,      
    blue: colors.blue,
    indigo: colors.indigo,
    violet: colors.violet,
    purple: colors.purple,
    fuchsia: colors.fuchsia,
    pink: colors.pink,
    rose: colors.rose,
    gray: colors.gray,
    neutral: colors.neutral,
    stone: colors.stone,
    zinc: colors.zinc,
    slate: colors.slate,
    },

And you're good to go.

Forem: Nostro

highsea : color shades generator for tailwindcss - #2 : now with darkmode and palette builder

Darkmode

Palette builder

highsea : color range generator for tailwindcss

Deploying to Heroku with SvelteKit

Create a svelte app

Modify the config file to use the right adapter

Add a start script and specify the node version required

Create the Heroku app

Using environment variables with SvelteKit

Using import.meta.env

Using process.env

Using TailwindCSS with SvelteKit

Updated content

Create a svelte app

Update the config files

Remove boilerplate CSS (if using demo template) or create app.css in the src root if using skeleton

Create ./src/routes/+layout.svelte if using skeleton or check it if using demo template

Original content

Create a svelte app

Remove boilerplate CSS (if using demo template) or create app.css if using skeleton

Using tailwind colors

Add a start script and specify the `node` version required

Using `import.meta.env`

Using `process.env`

Remove boilerplate CSS (if using demo template) or create `app.css` in the `src` root if using skeleton

Create `./src/routes/+layout.svelte` if using skeleton or check it if using demo template

Remove boilerplate CSS (if using demo template) or create `app.css` if using skeleton