npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tailwindfy

v0.0.7

Published

a minimal cli tool to help purge tailwind css without the tailwind set up

Downloads

1

Readme

A simple CLI Tool for quick use of tailwind full features

This tool will help you to quickly purge your HTML, jsx and other template files without having to install and set up tailwind yourself.

GETTING STARTED

Tailwindfy is pretty straight forward to set up and use. First, you install using:

npm install tailwindfy

or 

yarn add tailwindfy

Yarn is the preffered and much developer friendly option so if you haven't been using yarn, then you have to install yarn by running

 npm install -g yarn

to install yarn globally

USAGE

Since tailwindfy is a command line npm package, you simply need to use the node's npx command to get it up and running.

Tailwindfy offers the core tailwind functionalities in two broad ways:

1. Create Developement CSS

Tailwindfy offers the large development CSS that comes with several configurations and variants, carefully put together by Kitwinds's Kometa UI. To get this CSS (~8MB), you run the follwing command in the shell

 npx tailwindfy large

This will output the CSS file tailwinddevcss.css inside a styles/output folder in your working directory. Which can then be linked with the desired javascript HTML or imported into javascript .jsx. The development CSS is quite large and rightly so because of the several breakpoints and colors multiplied to offer smooth developement experience. However, you would obviously not want to ship that large CSS for production and tailwindfy offers just that.

2. PURGE UNUSED CSS

After tweaking the project to taste, you will likely want to ship the project into production. It is quite unacceptable to send ~8MB of CSS to the user over the bandwidth. Therefore to reduce the CSS file size to exactly the ones utilized, you simply use the javascript npx command to purge unused CSS. On the Shell or command line, run:

npx tailwindfy small [name of file]

for example:
npx tailwindfy small index.html

Some couple of things to note: 1. The file should be in the root of the project directory. But if not, then the file relative url from the root directory should be used, for example, this will work quite well

    npx tailwindfy small src/index.html

for a file in the src folder, with the src folder located in the root folder.

This command will output a purged CSS file into the styles/output folder in the root directory. The filename will be javascript tailwindminicss.css .(bear with us on that naming). Tailwindfy is meant for developers who just want to spin up a project quickly without having to worry about setting up tailwind config and still want to use the full tailwind capacity, because let's face it, the CDN version is rarely enough for your use case and comes with a lot of unnneccesary css. You will need all the optimization your webpage can get. That is pretty much all there is about as far as tailwindfy is concerned, you can report all bugs here. Contributions are highly encouraged. Thanks for taking your time to use my first contribution to open source and I am looking to connect. Thank you!.