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:
Install PNPM (if you haven't already):
npm install -g pnpm
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
Install dependencies (if you cloned the repository):
pnpm install
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:
Run the CLI Tool:
fontgen-cli
On any issues just fix your env vars or use pnpm fontgen-cli
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).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).
Font Classes Generated: The tool will automatically generate TailwindCSS classes based on your font files, such as:
font-roboto-regular
font-roboto-bold
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:
- Fork the repository on GitHub.
- Create a new branch with a descriptive name for your feature or fix.
- Write comprehensive tests for your changes (if applicable).
- 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
Related Resources
- Tailwind CSS Documentation - The official documentation for the utility-first CSS framework.
- PNPM Documentation - Learn more about the fast and efficient package manager.
License
This project is licensed under the GNU General Public License v3.0. For full details, please refer to the LICENSE file.