mustafaskyer

Configuration to use TailwindCSS colors in a Styled Components theme with CRA + TypeScript.

Tailwind colors list: https://tailwindcss.com/docs/customizing-colors#generating-colors

Create files src/@types/styled.d.ts and src/resources/theme.ts with content below. Then add the theme on your project:

import { ThemeProvider } from 'styled-components'
import { theme } from 'resources/theme'

mustafaskyer

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
 
@media all and (min-width: 768px) and (max-width: 1024px) { }