JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q9258F
  • License GPL-3.0

An awesome CLI (Terminal) Tool made using NodeJS and PNPM as the package manager to manage fonts in TailwindCSS! Easily add local fonts by using a specified folder and input into the @theme variable in Tailwind css file.

Package Exports

  • fontgen-cli
  • fontgen-cli/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fontgen-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

๐Ÿš€ Font Manager for TailwindCSS

Effortlessly integrate your local fonts into TailwindCSS projects with this handy CLI tool built with Node.js and PNPM! Say goodbye to manual configuration and enjoy seamless font management. This tool automatically generates the required font-family classes, making your typography setup a breeze.

โœจ Features

  • โšก๏ธ Easy to Use: Quickly point the tool to your local fonts folder and watch it integrate them into your TailwindCSS setup.
  • ๐ŸŽจ Automated Font-Class Generation: Automatically creates TailwindCSS utility classes like font-roboto-regular, font-roboto-bold, and more.
  • ๐Ÿ“‚ Supports Multiple Font Formats: Compatible with .ttf, .otf, .woff, .woff2, and other web-friendly font formats.
  • โš™๏ธ Seamless Integration: Automatically updates your tailwind.config.js file, saving you valuable development time.
  • ๐Ÿ”“ Open Source: Free to use and modify for both personal and commercial endeavors.

๐Ÿ› ๏ธ Installation

Get started with Font Manager for TailwindCSS in a few simple steps:

  1. Install PNPM (if you haven't already):

    npm install -g pnpm
  2. Clone the repository OR Install via NPM registry:

    • Cloning the repository:

      git clone [https://github.com/hypocalcemia/fontgen-cli.git](https://github.com/hypocalcemia/fontgen-cli.git)
      cd fontgen-cli
    • Installing from NPM registry:

      pnpm install fontgen-cli
  3. Install dependencies (if you cloned the repository):

    pnpm install
  4. Run the tool:

    pnpm run start

    Follow the interactive prompts to specify your fonts folder and configure your TailwindCSS project.

โš™๏ธ Usage

Managing your project fonts with the CLI tool is straightforward:

  1. Run the CLI Tool:

    fontgen-cli

    On any issues just fix your env vars or use pnpm fontgen-cli

  2. Provide the path to your fonts folder:

    Please provide the path to your fonts folder: /path/to/fonts

    (Replace /path/to/fonts with the actual path to your font directory).

  3. Specify the font file(s):

    Please specify the font(s): Roboto/Roboto-Regular.ttf Roboto/Roboto-Bold.ttf

    (List the font files you want to integrate, separated by spaces).

  4. Font Classes Generated: The tool will automatically generate TailwindCSS classes based on your font files, such as:

    • font-roboto-regular
    • font-roboto-bold
  5. Enjoy!: Your custom fonts are now integrated into your TailwindCSS project and ready for use.

๐Ÿค Contributing

We warmly welcome contributions! If you have suggestions for improvements or encounter any bugs, please don't hesitate to open an issue or submit a pull request.

How to Contribute:

  1. Fork the repository on GitHub.
  2. Create a new branch with a descriptive name for your feature or fix.
  3. Write comprehensive tests for your changes (if applicable).
  4. Submit a well-documented pull request explaining your changes.

We appreciate your contributions and will review them promptly!

๐Ÿงช Testing

To ensure the tool functions as expected, you can run the provided tests:

pnpm run test

This command will execute the test suite and verify the tool's functionality.

For contributors: Please include tests for any new features or bug fixes in your pull requests.

๐Ÿ› Troubleshooting

"Error: Font folder is empty."

  • Double-check that the provided folder path is correct.
  • Ensure that the specified folder contains valid font files (e.g., .ttf, .woff2).

"TailwindCSS classes are not being applied."

  • Verify that TailwindCSS is correctly configured in your project.
  • After running the tool, you might need to restart your development server for the changes in tailwind.config.js to take effect.

"Font styles are not being recognized."

  • Ensure that the file paths for each font style within your fonts folder are accurate.
  • The generated TailwindCSS classes (font-roboto-regular, font-roboto-bold, etc.) are derived from the font file names. Make sure your class names in your HTML/CSS match these generated names.

๐Ÿ”— Appendix

License

This project is licensed under the GNU General Public License v3.0. For full details, please refer to the LICENSE file.