(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3090],{3221:(n,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/use-tailwind-css-in-a-project",function(){return i(41594)}])},41594:(n,t,i)=>{"use strict";i.r(t),i.d(t,{__N_SSG:()=>h,default:()=>m,markdoc:()=>g});var e=i(67294),o=i(1272),s=i(4211),a=i(84266),l=i(52385),r=i(6467),c=i(12251);let u={tags:(0,a.w)(l),nodes:(0,a.w)(r),functions:(0,a.w)(c),...(0,a.w)({})},d=new s.ZP.Tokenizer({allowComments:!0}).tokenize('---\ntitle: \'How do I use Tailwind CSS on a project?\'\ndescription: \'Learn how to use Tailwind CSS in your Blutui project.\'\n---\n\n## Introduction\n\nTailwindCSS is a utility-first CSS framework that allows for rapid development of web interfaces. This guide will walk you through integrating TailwindCSS with your Blutui project.\n\n## Prerequisites\n\n- A Blutui project set up and ready to go.\n- A package manager (`npm`, `yarn`, or `pnpm`) installed. If not, refer to the using a package manager in a Blutui project guide.\n\n## Getting started\n\n{% step title="Installing Tailwind CSS" position="1" %}\nOpen your terminal or command prompt and navigate to your Blutui project directory. Begin by installing TailwindCSS using:\n\n```bash\nnpm install -D tailwindcss postcss\n```\n\nInitialise the configuration for TailwindCSS with:\n\n```bash\nnpx tailwindcss init\n```\n\nThis command will create a `tailwind.config.js` file in your project root.\n{% /step %}\n\n{% step title="Configure Tailwind CSS" position="2" %}\nAdd the following configuration to `tailwind.config.js` under the `content` key to instruct TailwindCSS where to look for classes:\n\n```js\ncontent: [\n  "./views/**/*.{canvas,html}",\n],\n```\n\n{% /step %}\n\n{% step title="Setting up the source directory" position="3" %}\nCreate a `src` folder at the root of your project, so you have `src`, `public`, and `views` folders. This structure allows TailwindCSS to only compile the classes you\'re using. Inside the `src` folder, create a `styles` sub-folder and then add a `main.css` file within it. Add the following directives in the `main.css` file:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n{% /step %}\n\n{% step title="Compiling Tailwind CSS" position="4" %}\nExecute the following command:\n\n```bash\nnpx tailwindcss -i ./src/styles/main.css -o ./public/main.css --watch\n```\n\nThis command compiles the CSS and outputs it to the `public` folder, making it ready to link in your template.\n{% /step %}\n\n{% step title="Integrating Tailwind CSS with Parcel.js" position="5" %}\nIf you\'re using Parcel in your Blutui project and need to set it up, refer to the guide on [setting up Parcel with Blutui](/guides/use-parcel-js-in-a-project).\n\nNext, create a `.postcssrc` file at the root of your project (next to the `tailwind.config.js` file) and add the following configuration:\n\n```js\n{\n  plugins: {\n    tailwindcss: {}\n  }\n}\n```\n\nNow, direct Parcel to compile the CSS file. With the above configuration, Parcel should successfully compile your TailwindCSS styles.\n{% /step %}\n\n## Conclusion\n\nYou\'ve now successfully integrated TailwindCSS with your Blutui project! This setup ensures that your site benefits from the rapid and efficient styling capabilities of TailwindCSS. Enjoy your streamlined development process!\n'),p=s.ZP.parse(d,{slots:!1}),w=p.attributes.frontmatter?o.ZP.load(p.attributes.frontmatter):{},{components:f}=(0,a.J)(u);var h=!0;let g={frontmatter:w};function m(n){let t=n.markdoc;return s.RZ.react(t.content,e,{components:{...f,...n.components}})}}},n=>{var t=t=>n(n.s=t);n.O(0,[2649,4372,1542,2888,9774,179],()=>t(3221)),_N_E=n.O()}]);