create-tailwind-library
v0.1.2
Published
CLI to create a React component library with Tailwind CSS, ESLint, and Husky
Downloads
6
Maintainers
Readme
Create Tailwind Library
Welcome to Create Tailwind Library! This CLI tool sets up a complete environment for creating React component libraries with Tailwind CSS, TypeScript, ESLint, and Husky.
How to use
Features
- 🛠️ React: Build reusable components with React.
- 🎨 Tailwind CSS: Style your components with utility-first CSS.
- 💻 TypeScript: Write type-safe code with TypeScript.
- 📏 ESLint: Maintain code quality and consistency.
- 🐶 Husky: Run pre-commit hooks to ensure code quality.
Getting Started
Prerequisites
Ensure you have the following installed on your machine:
Installation
Install the CLI globally using npm:
npm install -g create-tailwind-library
Usage
npx create-tailwind-library my-project
This will create a new directory my-project with the initial setup.
Project Structure
my-project/
├── src/
│ ├── components/
│ │ └── button.tsx
│ ├── styles/
│ │ └── globals.css
│ └── index.ts
├── .eslintrc.json
├── .gitignore
├── package.json
├── postcss.config.js
├── rollup.config.js
├── tailwind.config.js
└── tsconfig.json
Scripts
- npm run build: Build the library using Rollup.
- npm run lint: Run ESLint to check for code quality issues.
Example Components
import React from "react";
const Button: React.FC = ({ children }) => {
return (
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
{children}
</button>
);
};
export default Button;
Styling
@tailwind base;
@tailwind components;
@tailwind utilities;
ESLint Configuration
The project uses a standard ESLint configuration for TypeScript and React, ensuring code quality and consistency across your library.
Husky
Husky is set up to run pre-commit hooks using lint-staged, ensuring that your code meets the quality standards before every commit.
### Contributing Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or suggestions.
License
This project is licensed under the MIT License.
Happy coding!