var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var i=a=>l(a,"__esModule",{value:!0});var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of N(n))!k.call(a,c)&&(s||c!=="default")&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a},w=(a,n)=>o(i(l(a!=null?h(u(a)):{},"default",!n&&a&&a.__esModule?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a),b=(a=>(n,s)=>a&&a.get(n)||(s=o(i({}),n,1),a&&a.set(n,s),s))(typeof WeakMap!="undefined"?new WeakMap:0);var p=g((C,r)=>{r.exports=_jsx_runtime});var S={};y(S,{default:()=>j,frontmatter:()=>f});var e=w(p()),f={title:"Twin 101: Use Tailwind CSS + CSS-in-JS in a Next.js App",tags:["how-to","react","next.js","twin","tailwind","emotion"],summary:"How to setup your Next.js app to use Tailwind CSS and CSS-in-JS with twin.macro",publishedAt:"March 5, 2022",updatedAt:"July 2, 2022"};function d(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",code:"code",pre:"pre",h3:"h3",div:"div",ol:"ol",li:"li",ul:"ul"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"introduction",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#introduction",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,e.jsx)(n.p,{children:"Twin is a library that let\u2019s you enjoy the best of Tailwind CSS together with CSS-in-JS libraries like emotion or styled-components. In this article I\u2019ll walk you through how to setup Tailwind CSS and CSS-in-JS (emotion) in your Next.js app with twin.macro."}),` `,(0,e.jsxs)(n.h2,{id:"installation",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#installation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(n.p,{children:["For this example we\u2019ll be using Emotion as our CSS-in-JS library. There are two ways to get started with Twin. If you\u2019re starting a new Next.js project you can simply download the ",(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion",children:"next-emotion starter"})," using the following command - remember to replace ",(0,e.jsx)(n.code,{children:"folder-name"})," with the name of your project:"]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"language-bash code-highlight",children:(0,e.jsx)(n.span,{className:"code-line",children:`npx degit https://github.com/ben-rogerson/twin.examples/next-emotion folder-name `})})}),` `,(0,e.jsxs)(n.p,{children:["This will clone the starter which has everything already setup and configured for you. Once that is done, you should navigate into the folder and run ",(0,e.jsx)(n.code,{children:"npm install"})," to install dependencies, then ",(0,e.jsx)(n.code,{children:"npm run dev"})," to start the dev server."]}),` `,(0,e.jsxs)(n.h3,{id:"existing-projects",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#existing-projects",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Existing Projects"]}),` `,(0,e.jsx)(n.p,{children:"For existing projects, we\u2019ll have to install the dependencies and configure the project."}),` `,(0,e.jsxs)(n.h3,{id:"step-1---install-dependencies",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#step-1---install-dependencies",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Step 1 - Install Dependencies"]}),` `,(0,e.jsx)(n.p,{children:"Run the following command to install the required dependencies:"}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"npm"})," ",(0,e.jsx)(n.span,{className:"token function",children:"install"}),` @emotion/react @emotion/styled @emotion/css @emotion/server `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"npm"})," ",(0,e.jsx)(n.span,{className:"token function",children:"install"}),` -D twin.macro tailwindcss @emotion/babel-plugin babel-plugin-macros `]})]})}),` `,(0,e.jsxs)(n.h3,{id:"step-2---add-the-global-styles",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#step-2---add-the-global-styles",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Step 2 - Add the Global Styles"]}),` `,(0,e.jsx)(n.p,{children:"Twin comes with a GlobalStyles import that adds some the base styles from tailwind together with some @keyframes for animations, and some global css variables to alleviate cross-browser inconsistencies."}),` `,(0,e.jsxs)(n.p,{children:["Create a new file in the path ",(0,e.jsx)(n.code,{children:"styles/GlobalStyles.js"})," and add the following:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"styles/GlobalStyles.js"}),(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Global"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," css ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@emotion/react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:["tw",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," theme",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GlobalStyles"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"BaseStyles"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'twin.macro'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," customStyles ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"css"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"body"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"WebkitTapHighlightColor"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," theme",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"colors.purple.500"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"tw",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"antialiased"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GlobalStyles"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"BaseStyles"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Global"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"styles"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"customStyles",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GlobalStyles"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["Next, import the GlobalStyles in ",(0,e.jsx)(n.code,{children:"pages/_app.js"}),":"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/_app.js"}),(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GlobalStyles"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'./../styles/GlobalStyles'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Component"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," pageProps ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"GlobalStyles"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Component"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"pageProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),` `]})]})}),` `,(0,e.jsxs)(n.h3,{id:"step-3---ssr-styles",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#step-3---ssr-styles",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Step 3 - SSR Styles"]}),` `,(0,e.jsxs)(n.p,{children:["To use emotion\u2019s SSR with Next.js, we need to add a custom Document component in ",(0,e.jsx)(n.code,{children:"pages/_document.js"})," that renders critical styles and inserts them into the ",(0,e.jsx)(n.code,{children:""}),"."]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/_document.js"}),(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Html"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Head"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Main"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextScript"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/document'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," extractCritical ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@emotion/server'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"class"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"MyDocument"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Document"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"static"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getInitialProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"ctx"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," initialProps ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Document"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"getInitialProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"ctx",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," critical ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"extractCritical"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"initialProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"html"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" initialProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"html"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," critical",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"html"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" initialProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"styles"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"React.Fragment"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"initialProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"styles"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"style"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"data-emotion-css"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"critical",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"ids"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"join"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"' '"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"dangerouslySetInnerHTML"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"__html"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," critical",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"css"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"}),` initialProps `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"render"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Html"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Head"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"style"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"data-emotion-css"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"props"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"ids"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"join"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"' '"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"dangerouslySetInnerHTML"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"__html"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"this"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"props"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"css"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Main"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"NextScript"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.h3,{id:"step-4-optional---adjusting-twins-config-options",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#step-4-optional---adjusting-twins-config-options",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Step 4 (Optional) - Adjusting Twin\u2019s Config Options"]}),` `,(0,e.jsxs)(n.p,{children:["The default preset is set to \u2018emotion\u2019, but if you want to adjust ",(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md",children:"Twin\u2019s other options"}),", you can do so in any of the files below:"]}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:["Either in ",(0,e.jsx)(n.code,{children:"babel-plugin-macros.config.js"})]}),` `]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"babel-plugin-macros.config.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["module",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"exports"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"twin"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"preset"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'emotion'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.ol,{start:"2",children:[` `,(0,e.jsxs)(n.li,{children:["Or in ",(0,e.jsx)(n.code,{children:"package.json"})]}),` `]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"package.json"}),(0,e.jsx)(n.pre,{className:"language-json",children:(0,e.jsxs)(n.code,{className:"language-json code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token property",children:'"babelMacros"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:'"twin"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property",children:'"preset"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"emotion"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})]})}),` `,(0,e.jsxs)(n.h3,{id:"add-the-babel-config",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#add-the-babel-config",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Add The Babel Config"]}),` `,(0,e.jsxs)(n.p,{children:["Create a new file ",(0,e.jsx)(n.code,{children:".babelrc.js"})," in your project\u2019s root directory and add the following lines:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:".babelrc.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["module",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"exports"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"presets"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:"'next/babel'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string-property property",children:"'preset-react'"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"runtime"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'automatic'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"importSource"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@emotion/react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"plugins"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:"'@emotion/babel-plugin'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:"'babel-plugin-macros'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.h3,{id:"customizing-twin",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#customizing-twin",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Customizing Twin"]}),` `,(0,e.jsxs)(n.p,{children:["To be able to customize twin, you need to complete Step 4 above. You can ",(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md",children:"find all the configuration options for twin.macro here"}),"."]}),` `,(0,e.jsxs)(n.h3,{id:"customizing-tailwind-css",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#customizing-tailwind-css",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Customizing Tailwind CSS"]}),` `,(0,e.jsxs)(n.p,{children:["While it\u2019s not compulsory, you might want to change the default style configuration that tailwind provides to suit your theme. To customize tailwind\u2019s styles for your project, you\u2019ll need to add a ",(0,e.jsx)(n.code,{children:"tailwind.config.js"})," file in your project\u2019s root directory."]}),` `,(0,e.jsx)(n.p,{children:"You can start with the empty config below:"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"tailwind.config.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["module",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"exports"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"theme"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"extend"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"colors"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"plugins"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["Or, you can start with the ",(0,e.jsx)(n.a,{href:"https://raw.githubusercontent.com/tailwindcss/tailwindcss/master/stubs/defaultConfig.stub.js",children:"full config"}),", and tweak to your satisfaction. From your root folder run the following to get the full config:"]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"language-bash code-highlight",children:(0,e.jsx)(n.span,{className:"code-line",children:`npx tailwindcss-cli@latest init --full `})})}),` `,(0,e.jsxs)(n.h2,{id:"plugins",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#plugins",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Plugins"]}),` `,(0,e.jsxs)(n.p,{children:["Twin supports many tailwind plugins, like @tailwindcss/typography and @tailwindcss/forms, but plugins that use the ",(0,e.jsx)(n.code,{children:"addVariant"})," function are not compatible."]}),` `,(0,e.jsxs)(n.p,{children:["Here\u2019s the ",(0,e.jsx)(n.a,{href:"https://twin-docs.netlify.app/plugin-support",children:"list of supported plugins"})]}),` `,(0,e.jsxs)(n.h3,{id:"other-tools",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#other-tools",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Other tools"]}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.macro/discussions/227",children:"VSCode plugins and extensions"})}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://gist.github.com/ben-rogerson/c6b62508e63b3e3146350f685df2ddc9",children:"VSCode Snippets"})}),` `,(0,e.jsxs)(n.h2,{id:"next-steps",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#next-steps",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Next Steps"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.macro/blob/master/docs/prop-styling-guide.md",children:"Learn how to style with props"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.macro/blob/master/docs/styled-component-guide.md",children:"Learn how to work with styled-components"})}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"resources",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#resources",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Resources"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://github.com/ben-rogerson/twin.macro",children:"Twin.macro official docs"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/installation",children:"Tailwind CSS official docs"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://emotion.sh/docs/introduction",children:"Emotion official docs"})}),` `]})]})}function x(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(d,a)})):d(a)}var j=x;return b(S);})(); ;return Component;

Emotion Articles

Twin 101: Use Tailwind CSS + CSS-in-JS in a Next.js App

Get the latest articles, in your inbox