print styling

package.json

@@ -11,7 +11,7 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-icons": "^4.6.0",
-    "tailwindcss": "^3.2.1"
+    "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^1.0.0",

src/components/Content.jsx

@@ -4,7 +4,7 @@ import {TailwindContext} from '../context/TailwindContext';
 import {cheatsheetOrder} from '../context/cheatsheet';
 
 const Heading = ({data}) => (
-  <div className="flex flex-col flex-none grow  bg-purple-50 py-6 px-1">
+  <div className="flex flex-col flex-none grow bg-purple-50 print:bg-white py-6 px-1">
     {Object.keys(data).map((title) => (
       <div
         className="text-gray-60 text-purple-900  text-red-800 text-sm w-full p-2"
@@ -28,13 +28,13 @@ function Content() {
   const Loop = ({className, screen}) =>
     Object.entries(cheatsheet).map(([key, v]) => (
       <div
-        className={`my-4 grow lg:grow-0 ${className} `}
+        className={`my-4 grow lg:grow-0 ${className} print:break-inside-avoid-page`}
         key={v.title}
         style={{
           order: cheatsheetOrder[key][screen],
         }}>
         <Title title={v.title} />
-        <div className="flex flex-row overflow-x-scroll lg:overflow-hidden">
+        <div className="flex flex-row overflow-x-scroll lg:overflow-hidden print:border print:border-slate-300">
           {v.data.map((v2, i) => (
             <Heading data={v2} key={i} />
           ))}
@@ -96,11 +96,12 @@ function Content() {
 
   return (
     <div ref={ref}>
-      <div className="grid grid-cols-1 lg:flex lg:flex-wrap lg:justify-around lg:gap-2 lg:gap-y-10 p-4 pt-20 py-20 ">
-        <Loop className="lg:hidden" screen={'sm'} />
-        <Loop className="hidden lg:block xl:hidden" screen={'lg'} />
-        <Loop className="hidden xl:block 2xl:hidden " screen={'xl'} />
-        <Loop className="hidden 2xl:block " screen={'2xl'} />
+      <div className="grid grid-cols-1 lg:flex lg:flex-wrap lg:justify-around lg:gap-2 lg:gap-y-10 p-4 pt-20 py-20 print:break-before-page">
+        <Loop className="lg:hidden print:hidden" screen={'sm'} />
+        <Loop className="hidden lg:block xl:hidden print:hidden lg:print:hidden" screen={'lg'} />
+        <Loop className="hidden xl:block 2xl:hidden print:hidden xl:print:hidden" screen={'xl'} />
+        <Loop className="hidden 2xl:block print:hidden 2xl:print:hidden" screen={'2xl'} />
+        <Loop className="hidden print:block" screen={'xl'} />
       </div>
     </div>
   );

src/components/Footer.jsx

@@ -17,6 +17,10 @@ function Footer() {
         bg-purple-100
         text-red-700
         uppercase
+        print:flex-row
+        print:py-0
+        print:gap-2
+        print:justify-center
       ">
       <div className="text-sm text-gray-700">Made with</div>
       <div className="flex justify-center items-center border-4 border-rose-100  bg-rose-200 my-2 w-10 h-10  p-2 rounded-full">

src/components/Header.jsx

@@ -6,9 +6,9 @@ import Others from './header/Others';
 
 function Header() {
   return (
-    <header className="grid grid-cols-1 gap-5 bg-purple-100  p-5   lg:py-20 lg:pb-32 ">
+    <header className="grid grid-cols-1 gap-5 bg-purple-100 p-5 lg:py-20 lg:print:py-10 print:py-10 lg:pb-32 print:bg-white">
       {/* MOBILE */}
-      <div className="grid grid-cols-1 gap-10 mt-5 lg:hidden">
+      <div className="grid grid-cols-1 gap-10 mt-5 print:hidden lg:hidden">
         <Spacing />
         <Colors />
         <Breakpoints />
@@ -20,8 +20,8 @@ function Header() {
         <Others type="ColorsNum" />
       </div>
 
-      {/* TABLET-LANDSCAPE */}
-      <div className="hidden 2xl:hidden lg:grid lg:grid-cols-2 gap-10 mt-0 ">
+      {/* TABLET-LANDSCAPE & PRINT */}
+      <div className="hidden 2xl:hidden lg:grid lg:grid-cols-2 print:grid 2xl:print:grid print:grid-cols-2 gap-10 mt-0 ">
         <div>
           <Spacing />
         </div>
@@ -31,7 +31,7 @@ function Header() {
           <Others type="PseudoClassmedia" />
         </div>
       </div>
-      <div className="hidden 2xl:hidden lg:grid grid-cols-1 gap-10 mt-5 ">
+      <div className="hidden 2xl:hidden lg:grid print:grid 2xl:print:grid grid-cols-1 gap-10 mt-5 print:break-before-page print:pt-20">
         <div className="grid grid-cols-9 gap-10">
           <Others className="col-span-3" type="PseudoClassAria" />
           <Others className="col-span-2" type="Functions" />
@@ -42,7 +42,7 @@ function Header() {
       </div>
 
       {/* LARGE DESKTOP */}
-      <div className="hidden  2xl:grid 2xl:grid-cols-2 gap-24 mt-0 ">
+      <div className="hidden print:hidden 2xl:grid 2xl:print:hidden 2xl:grid-cols-2 gap-24 mt-0 ">
         <div>
           <Spacing />
         </div>

src/components/Nav.jsx

@@ -11,6 +11,7 @@ function Nav() {
         bg-purple-50        
         px-4
         py-5
+        print:py-2
       ">
       <div className="flex flex-col">
         <div className="text-red-700 font-semibold text-xl">

src/components/header/Breakpoints.jsx

@@ -9,7 +9,7 @@ function Breakpoints() {
     <div className="">
       <Title title="Breakpoints" />
       <div className="grid text-center overflow-x-scroll lg:overflow-hidden">
-        <div className="grid grid-cols-1 gap-y-   bg-purple-50 text-blue-500 py-4 ">
+        <div className="grid grid-cols-1 gap-y- bg-purple-50 print:bg-white text-blue-500 py-4 print:border print:border-slate-300">
           {Object.values(responsive).map((v) => {
             return (
               <div className="grid grid-cols-3 py-2" key={v.size}>

src/components/header/Colors.jsx

@@ -7,8 +7,8 @@ function Colors() {
   const {colors, colorsNum} = basic;
 
   let listColorSize = (color) => (
-    <div className="mr-1 lg:m-0 border border-red-50 grow" key={color}>
-      <div className={`text-center text-xs py-4 px-0 m-0 text-${color}-500 `}>
+    <div className="mr-1 lg:m-0 border border-red-50 print:border-white grow" key={color}>
+      <div className={`text-center text-xs print:text-sm py-4 px-0 m-0 text-${color}-600 `}>
         {color}
       </div>
 
@@ -17,12 +17,12 @@ function Colors() {
           <div className="" key={v}>
             <div
               className={
-                'py-4 px-4 lg:px-3 m-0 text-xs text-center  bg-' +
+                'py-4 px-4 lg:px-3 m-0 text-xs print:text-sm text-center print:font-semibold bg-' +
                 color +
                 '-' +
                 v
               }>
-              <div className={`text-${color}-${v === 400 ? '6' : '4'}00 `}>
+              <div className={`text-${color}-${v < 500 ? '700' : '200'} print:text-${color}-${v < 500 ? '950' : '50'} `}>
                 {v}
               </div>
             </div>
@@ -36,7 +36,7 @@ function Colors() {
     <div className="">
       <Title title="Colors" />
       <div className="">
-        <div className="flex lg:justify-evenly overflow-x-scroll lg:overflow-x-auto bg-purple-100 ">
+        <div className="flex lg:justify-evenly overflow-x-scroll lg:overflow-x-auto bg-purple-100 print:bg-white print:border print:border-slate-300">
           {colors.map((v) => {
             return listColorSize(v);
           })}

src/components/header/Others.jsx

@@ -3,7 +3,7 @@ import Title from '../Title';
 import {TailwindContext} from '../../context/TailwindContext';
 
 const Tags = ({arr}) => (
-  <div className="flex flex-wrap gap- italic bg-purple-50 g-white py-3 px-2  tracking-wide">
+  <div className="flex flex-wrap gap- italic bg-purple-50 print:bg-white g-white py-3 px-2 tracking-wide print:border print:border-slate-300">
     {arr.map((v) => (
       <div
         className="border-purple-300 border-r-2 py-px p-2 mb-1 last:border-0"

src/components/header/Spacing.jsx

@@ -8,12 +8,14 @@ function Spacing({title}) {
   return (
     <div className="">
       <Title title="Spacing" />
-      <div className="flex flex-col items-start justify-center bg-purple-50 p-6 overflow-x-scroll lg:overflow-hidden">
+      <div className="flex flex-col items-start justify-center bg-purple-50 p-6 overflow-x-scroll lg:overflow-hidden print:bg-white print:border print:border-slate-300">
         {basic.spacing.map((v) => {
           return (
-            <div className="flex flex-row items-center pt-1" key={v}>
-              <div className="w-10 text-sm text-gray-800"> {v} </div>
-              <div className={'bg-purple-300 h-2 w-' + v}></div>
+            <div className="flex flex-row items-center pt-1" key={v[0]}>
+              <div className="w-10 text-sm text-gray-800"> {v[0]} </div>
+              <div className="w-10 text-sm text-gray-800 text-center"> {v[1]} </div>
+              <div className="w-10 mr-5 text-sm text-gray-800 text-right"> {v[2]} </div>
+              <div className={'bg-purple-300 h-2 w-' + v[0]}></div>
             </div>
           );
         })}

src/context/basic.js

@@ -1,40 +1,41 @@
 export let basic = {
   spacing: [
-    '0',
-    'px',
-    '0.5',
-    '1',
-    '1.5',
-    '2',
-    '2.5',
-    '3',
-    '3.5',
-    '4',
-    '5',
-    '6',
-    '7',
-    '8',
-    '9',
-    '10',
-    '11',
-    '12',
-    '14',
-    '16',
-    '20',
-    '24',
-    '28',
-    '32',
-    '36',
-    '40',
-    '44',
-    '48',
-    '52',
-    '56',
-    '60',
-    '64',
-    '72',
-    '80',
-    '96',
+    ['#',   'rem',   'px'],
+    ['0',   '0',     '0'],
+    ['1',   '1',     '1'],
+    ['0.5', '.125', '2'],
+    ['1',   '.25',  '4'],
+    ['1.5', '.375', '6'],
+    ['2',   '.5',   '8'],
+    ['2.5', '.625', '10'],
+    ['3',   '.75',  '12'],
+    ['3.5', '.875', '14'],
+    ['4',   '1',     '16'],
+    ['5',   '1.25',  '20'],
+    ['6',   '1.5',   '24'],
+    ['7',   '1.75',  '28'],
+    ['8',   '2',     '32'],
+    ['9',   '2.25',  '36'],
+    ['10',  '2.5',   '40'],
+    ['11',  '2.75',  '44'],
+    ['12',  '3',     '48'],
+    ['14',  '3.5',   '56'],
+    ['16',  '4',     '64'],
+    ['20',  '5',     '80'],
+    ['24',  '6',     '96'],
+    ['28',  '7',     '112'],
+    ['32',  '8',     '128'],
+    ['36',  '9',     '144'],
+    ['40',  '10',    '160'],
+    ['44',  '11',    '176'],
+    ['48',  '12',    '192'],
+    ['52',  '13',    '208'],
+    ['56',  '14',    '224'],
+    ['60',  '15',    '240'],
+    ['64',  '16',    '256'],
+    ['72',  '18',    '288'],
+    ['80',  '20',    '320'],
+    ['96',  '24',    '384'],
   ],
 
   colors: [
@@ -43,6 +44,8 @@ export let basic = {
     'zinc',
     'neutral',
     'stone',
+    'red',
+    'orange',
     'amber',
     'yellow',
     'lime',
@@ -58,8 +61,6 @@ export let basic = {
     'fuchsia',
     'pink',
     'rose',
-    'red',
-    'orange',
   ],
   pseudoClass: [
     'hover',
@@ -159,5 +160,5 @@ export let basic = {
     'text-decoration': ['hover', 'focus'],
   },
   opacity: [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100],
-  colorsNum: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  colorsNum: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
 };