npm npm downloads

Gatsby plugin for styling with Linaria


Install the plugin and Linaria:

yarn add gatsby-plugin-linaria linaria

Next, add the plugin to gatsby-config.js:

plugins: [

Finally, make sure to add .linaria-cache to your .gitignore file.


If you’re using TypeScript, make sure to include gatsby-plugin-typescript before gatsby-plugin-linaria in your config:

plugins: [

See #13 for more details.

Critical CSS Extraction

GatsbyJS & Linaria extract your stylesheet and inject into the <head> by default. So, you don’t need to worry about the SSR & FOUC.

However, the extracted stylesheet would be huge for large site, because it includes css used by whole pages/components

This plugin provide an option extractCritical that use linaria/server API behind the scene

  resolve: 'gatsby-plugin-linaria',
  options: {
    extractCritical: true, // false by default.

When you opt-in this feature, only Critical CSS is injected into the <head>.

And loading full CSS will be deferred for later paint or navigations.

See this for more detailed explanation.



Happy styling! :art: