moh-snoussi / react-template-tailwind-typescript

Description

This project was bootstrapped with Create React App --template typescript. it has tailwindcss with few plugin and removes some boilerplate code.

Start

npx create-react-app my_path --template ts-wind
cd my_path
npm run start # yarn start

Tailwindcss

Tailwindcss is a utility first css framework that helps build and compose design in the HTML markup.

Tailwindcss plugin used

• typography
• tailwindcss-elevation
• tailwindcss-gradients
• tailwindcss-border-gradients
• tailwindcss-debug-screens
• tailwindcss-scroll-snap

Available Scripts

All script available in create-react-app are available as well npm run start

Tips

If you are working with images, install the responsive images generator, Image Processing Pipeline and than: ipp -i your_image_path -o src/Asssets/images to automatically generate different optimized web images for different screen sizes:

import React, { Component } from 'react';

import splashMd from "./Asssets/images/splash-md.webp"
import splashSm from "./Asssets/images/splash-sm.webp"
import splashLg from "./Asssets/images/splash-lg.webp"
import splashXl from "./Asssets/images/splash-xl.webp"

class Splash extends Component
{
    render()
    {
        return (
            <div className='absolute z-n2 flex justify-center'>
                <img className={`min-w-screen min-h-screen object-cover `} src={splashMd} srcSet={ `${splashSm} 300w, ${splashMd} 768w, ${splashLg} 1280w, ${splashXl} 1400w`} alt='Splash' />
            </div>
        );
    }
}