Styles - hdknr/gatsby-home GitHub Wiki

Tailwind CSS + PostCSS

% npm i -S tailwindcss postcss gatsby-plugin-postcss
npm WARN @pmmmwh/[email protected] requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^15.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
+ [email protected]
+ [email protected]
added 26 packages from 52 contributors, updated 1 package and audited 2049 packages in 9.131s

Emotion + Styled-Components + TailwindCSS

% npm i -S @emotion/core @emotion/styled gatsby-plugin-emotion tailwind.macro@next
npm WARN @pmmmwh/[email protected] requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^15.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
+ @emotion/[email protected]
+ [email protected]
+ @emotion/[email protected]
added 23 packages from 7 contributors and audited 2072 packages in 12.858s

VSCode:

PurgeCSS

% npm i -S purgecss gatsby-plugin-purgecss
npm WARN @pmmmwh/[email protected] requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^15.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
+ [email protected]
added 6 packages from 4 contributors, updated 1 package and audited 2080 packages in 7.407s

% npm clean; npm start

....

Removed Selectors:  [
  'main',
  'h1',
  'hr',
  'pre',
  'a',
  'abbr[title]',
  'b',
  'strong',
  'code',
  'kbd',
  'samp',
  'small',
  'sub',
  'sup',
  'sup',
  'img',
  'button',
  'input',
  'optgroup',
  'select',
  'textarea',
  '[type="button"]',
  '[type="reset"]',
  '[type="submit"]',
  'button::-moz-focus-inner',
  '[type="button"]::-moz-focus-inner',
  '[type="reset"]::-moz-focus-inner',
  '[type="submit"]::-moz-focus-inner',
  'button:-moz-focusring',
  '[type="button"]:-moz-focusring',
  '[type="reset"]:-moz-focusring',
  '[type="submit"]:-moz-focusring',
  'fieldset',
  'legend',
  'progress',
  'textarea',
  '[type="checkbox"]',
  '[type="radio"]',
  '[type="number"]::-webkit-inner-spin-button',
  '[type="number"]::-webkit-outer-spin-button',
  '[type="search"]',
  '[type="search"]::-webkit-search-decoration',
  '::-webkit-file-upload-button',
  'details',
  'summary',
  'template',
  '[hidden]',
  'blockquote',
  'dl',
  'dd',
  'h1',
  'h2',
  'h3',
  'h4',
  'h5',
  'h6',
  'hr',
  'figure',
  'p',
  'pre',
  'button:focus',
  'ol',
  'ul',
  'input::placeholder',
  'textarea::placeholder',
  '[role="button"]',
  'table',
  'code',
  'svg',
  'video',
  'canvas',
  'audio',
  'iframe',
  'embed',
  'object',
  '.container',
  '.space-y-0 > :not(template) ~ :not(template)',
  '.space-x-0 > :not(template) ~ :not(template)',
  '.space-y-1 > :not(template) ~ :not(template)',
  '.space-x-1 > :not(template) ~ :not(template)',
  '.space-y-2 > :not(template) ~ :not(template)',
  '.space-x-2 > :not(template) ~ :not(template)',
  '.space-y-3 > :not(template) ~ :not(template)',
  '.space-x-3 > :not(template) ~ :not(template)',
  '.space-y-4 > :not(template) ~ :not(template)',
  '.space-x-4 > :not(template) ~ :not(template)',
  '.space-y-5 > :not(template) ~ :not(template)',
  '.space-x-5 > :not(template) ~ :not(template)',
  '.space-y-6 > :not(template) ~ :not(template)',
  '.space-x-6 > :not(template) ~ :not(template)',
  '.space-y-8 > :not(template) ~ :not(template)',
  '.space-x-8 > :not(template) ~ :not(template)',
  '.space-y-10 > :not(template) ~ :not(template)',
  '.space-x-10 > :not(template) ~ :not(template)',
  '.space-y-12 > :not(template) ~ :not(template)',
  '.space-x-12 > :not(template) ~ :not(template)',
  '.space-y-16 > :not(template) ~ :not(template)',
  '.space-x-16 > :not(template) ~ :not(template)',
  '.space-y-20 > :not(template) ~ :not(template)',
  '.space-x-20 > :not(template) ~ :not(template)',
  ... 13823 more items
]
...

Links