https://www.tailwindcss.cn/_next/static/chunks/pages/docs/guides/meteor-ac81993a27855b0b.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9962],{92432:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/guides/meteor",function(){return n(56175)}])},52196:function(e,t,n){"use strict";n.d(t,{a:function(){return l}});var i=n(85893),s=n(76239);function l({title:e,description:t,children:n}){return(0,i.jsxs)(s.i,{children:[(0,i.jsx)("header",{id:"header",className:"mb-10 md:flex md:items-start",children:(0,i.jsxs)("div",{className:"flex-auto max-w-4xl",children:[(0,i.jsx)("p",{className:"mb-4 text-sm leading-6 font-semibold text-sky-500 dark:text-sky-400",children:"Installation"}),(0,i.jsx)("h1",{className:"text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200",children:e}),(0,i.jsx)("p",{className:"mt-4 text-lg text-slate-700 dark:text-slate-400",children:t})]})}),(0,i.jsx)("section",{className:"mb-16 relative",children:n})]})}},56175:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return r},default:function(){return d}});var i=n(85893),s=n(72788),l=n(52196),o=n(39897);let a=[{title:"Create your project",body:()=>(0,i.jsxs)("p",{children:["Start by creating a new Meteor project if you don't have one set up already. The most common approach is to use ",(0,i.jsx)("a",{href:"https://www.meteor.com/developers/install",children:"the Meteor CLI"}),"."]}),code:{name:"Terminal",lang:"terminal",code:"meteor create my-project\ncd my-project"}},{title:"Install Tailwind CSS",body:()=>(0,i.jsxs)("p",{children:["Install ",(0,i.jsx)("code",{children:"tailwindcss"})," and its peer dependencies via npm, and then run the init command to generate both ",(0,i.jsx)("code",{children:"tailwind.config.js"})," and ",(0,i.jsx)("code",{children:"postcss.config.js"}),"."]}),code:{name:"Terminal",lang:"terminal",code:"npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p"}},{title:"Configure your template paths",body:()=>(0,i.jsxs)("p",{children:["Add the paths to all of your template files in your ",(0,i.jsx)("code",{children:"tailwind.config.js"})," file."]}),code:{name:"tailwind.config.js",lang:"js",code:`  /** @type {import('tailwindcss').Config} */
2  module.exports = {
3>   content: [
4>     "./imports/ui/**/*.{js,jsx,ts,tsx}",
5>     "./client/*.html",
6>   ],
7    theme: {
8      extend: {},
9    },
10    plugins: [],
11  }`}},{title:"Add the Tailwind directives to your CSS",body:()=>(0,i.jsxs)("p",{children:["Add the ",(0,i.jsx)("code",{children:"@tailwind"})," directives for each of Tailwind’s layers to your"," ",(0,i.jsx)("code",{children:"./client/main.css"})," file."]}),code:{name:"main.css",lang:"css",code:"@tailwind base;\n@tailwind components;\n@tailwind utilities;"}},{title:"Start your build process",body:()=>(0,i.jsxs)("p",{children:["Run your build process with ",(0,i.jsx)("code",{children:"npm run start"}),"."]}),code:{name:"Terminal",lang:"terminal",code:"npm run start"}},{title:"Start using Tailwind in your project",body:()=>(0,i.jsx)("p",{children:"Start using Tailwind’s utility classes to style your content."}),code:{name:"App.jsx",lang:"jsx",code:`  export const App = () => (
12>   <h1 className="text-3xl font-bold underline">
13>     Hello world!
14>   </h1>
15  )`}}];var r=!0;function d({code:e}){return(0,i.jsx)(l.a,{title:"Install Tailwind CSS with Meteor",description:"Setting up Tailwind CSS in a Meteor project.",children:(0,i.jsx)(o.R,{steps:a,code:e})})}d.layoutProps={meta:{title:"Install Tailwind CSS with Meteor",description:"Setting up Tailwind CSS in a Meteor project.",section:"Getting Started"},Layout:s.L,allowOverflow:!1}}},function(e){e.O(0,[9495,7308,7667,9774,2888,179],function(){return e(e.s=92432)}),_N_E=e.O()}]);