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>
);
}
}