Tailwigor

A POC Tailwind based project

Current Main Objectives

• Global file as base to import in projects
• HTML watcher that checks witch classes are being used and deliver only necessary data
• A hot-reload in HTML usin chokidar and sockets between HTML and Nodejs

Description

Tailwind CSS has become a popular utility-first CSS framework for rapidly building custom user interfaces. In this coding challenge, you are tasked with creating a simplified clone of Tailwind CSS using TypeScript. We'll call this clone "Tailspin." Your goal is to implement a basic set of utility classes and a responsive design system similar to Tailwind CSS, using TypeScript to ensure type safety and a better developer experience.

Objectives:

Implement a set of utility classes for styling elements, including:

• Spacing (margin and padding)
• Typography (font size, font weight, line height, and text alignment)
• Colors (background, text, and border colors)
• Borders (border width, border radius, and border style)
• Flexbox and Grid layout utilities

Create a responsive design system using breakpoints similar to Tailwind CSS:

• Small (640px)
• Medium (768px)
• Large (1024px)
• Extra Large (1280px)

Allow users to extend or customize the configuration, including:

• Adding custom breakpoints
• Modifying default values (e.g., spacing, colors, fonts)

Ensure type safety and autocompletion support with TypeScript.

Requirements:

Use TypeScript for the implementation.

Notas pessoais

Em caso de implmentação de typescript

Verifique

https://www.typescriptlang.org/download#:~:text=TypeScript%20can%20be%20installed%20through,package%20or%20Visual%20Studio%20extension.