terrysmithdc / tailwindcss-vertical-rhythm

A tailwind plugin which helps create scaling typography.

Hello, I'm Terry

A coffee powered pixel enthusiast.

?

Haven't decided what to put here

tailwindcss-vertical-rhythm's Issues

Setup the repo for GitHub pages to show live examples

Use the pages action to automate each commit to deploy GitHub Pages.

https://github.com/marketplace/actions/github-pages-action

Create a basic example using ems

Create a bare bones example using ems.

• Has an index file with basic typography content
• A tailwind config file setting up the plugin
• Css file setting up tailwind
• Use the tailwind cli to compile and commit the compiled artifacts to the ./public folder to host in GitHub Pages.

Better documentation in the Readme

General ticket to be left open for Hacktoberfest. If you see grammar issues, want to improve the format, etc.. Please open up a pull request and I'll get to it.

Create an example using different scales

Create a bare bones example which shows different scales other then the default scale.

• Has an index file with basic typography content
• A tailwind config file setting up the plugin
• Css file setting up tailwind
• Use the tailwind cli to compile and commit the compiled artifacts to the ./public folder to host in GitHub Pages.

Create config/API docs for people to reference for hactoberfest tickets.

I realized the tickets are hard to pick up if you didn't write the plugin, I'm going to go through and outline all the knobs/features to make examples easier to create.

Npm Scripts

dev

• Use npm run dev to let people add examples.
• Probably need to know what tailwind config to point to, only support working on one example at a time.

build

• Set up a build script to compile every example to a /public folder. Each example needs it's own tailwind config.
• The script should compile the detected classes and place the html and css file un-minified into public.

Cleanup plugin config parser.

Double check header spacing configs are working correctly.
Move from || operator to ?? for safer defaults settings.

Create a example opting out of dynamic scaling

Create a bare bones example which does not scale to the screen size.

• Has an index file with basic typography content
• A tailwind config file setting up the plugin
• Css file setting up tailwind
• Use the tailwind cli to compile and commit the compiled artifacts to the ./public folder to host in GitHub Pages.

Create an advanced example with custom factors

Create an example which supports custom factors and overrides scaling settings.

• Has an index file with basic typography content
• A tailwind config file setting up the plugin
• Css file setting up tailwind
• Use the tailwind cli to compile and commit the compiled artifacts to the ./public folder to host in GitHub Pages.

Gifs/Images for the readme

Add screen shots and maybe an animation of the scaling font to the readme here appropriate.

Add badges to readme

Right after the title in the readme it might look nice to show some badge stats.

https://badgen.net/

• Add Bundlephobia badge for minified package size
• Add Bundlephobia gziped package size.
• Add GitHub badge for combined statuses (tag).

Installation and setup instructions

Update the readme to have some getting started instructions

• npm install
• tailwind configuration
• explain factor classes
• explain scale options
• show how to disable dynamic mode

Create a basic example using rems

Create a bare bones example using default settings.

• Has an index file with basic typography content
• A tailwind config file setting up the plugin
• Css file setting up tailwind
• Use the tailwind cli to compile and commit the compiled artifacts to the ./public folder to host in GitHub Pages.