{"componentChunkName":"component---src-templates-blog-js","path":"/blog/tailwind-css-in-nextjs/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"387380f4-c6d6-5859-9312-d042eadecea2","excerpt":"Tailwind With Nexjs Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"How to use and set up Tailwind CSS with Nextjs.\",\n  \"lastUpdated\": \"20 May 2024\",\n  \"date\": \"2021-01-10T02:16:04+01:00\",\n  \"metaTitle\": \"Tailwind CSS in Nextjs\",\n  \"metaDescription\": \"Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Integrating Tailwind CSS with Next.js is straightforward and enhances your development workflow.\",\n  \"type\": \"blog\",\n  \"author\": \"Emmanuel Chinonso\",\n  \"role\": \"Web Developer and Writer\",\n  \"authorImage\": \"/blog/author/author_emmanuel.jpg\",\n  \"image\": \"./_/images/tailwind-css-in-next-js.png\",\n  \"tags\": [\"tailwind css\", \"bootstrap\", \"bootstrap 5 alpha\", \"react\", \"nextjs\"],\n  \"previousTitle\": \"What is Nodejs, Express and When Should It Be Used\",\n  \"previousPath\": \"what-is-nodejs-and-express\",\n  \"nextTitle\": \"How to use Tailwind css Width\",\n  \"nextPath\": \"Tailwind-width\",\n  \"blogtype\": \"tailwindcss\",\n  \"canonicalUrl\": \"https://windframe.dev/blog/tailwind-css-in-nextjs\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind With Nexjs\"), mdx(\"p\", null, \"Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Integrating Tailwind CSS with Nextjs is straightforward and enhances your development workflow. Let\\u2019s dive into the setup process.\"), mdx(\"h2\", null, \"Prerequisites\"), mdx(\"p\", null, \"Before we dive into the setup, ensure you have the following prerequisites:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Node.js: Installed on your machine.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Basic knowledge of JavaScript and React.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Familiarity with Next.js.\")), mdx(\"h1\", null, \"Table of content\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 1: Create a Next.js Project\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 2: Install Tailwind CSS Dependencies\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 3:  Configure tailwind.config.js\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 4: Create Your Styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 5: Import Tailwind CSS Styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Step 6: Start Your Next.js Project\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Conclusion\")), mdx(\"h2\", null, \"Step 1: Create a Next.js Project\"), mdx(\"p\", null, \"If you haven't already, create a new Next.js project using the following command in your terminal:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npx create-next-app my-nextjs-project\\n\")), mdx(\"p\", null, \"Replace \\\"my-nextjs-project\\\" with your desired project name.\"), mdx(\"h2\", null, \"Step 2: Install Tailwind CSS Dependencies\"), mdx(\"p\", null, \"Navigate to your project directory:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"cd my-nextjs-project\\n\")), mdx(\"p\", null, \"Install the necessary dependencies for Tailwind CSS:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm install tailwindcss postcss autoprefixer\\n\")), mdx(\"p\", null, \"This command installs Tailwind CSS, PostCSS, and Autoprefixer. It also generates \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"postcss.config.js\"), \" files in your project\"), mdx(\"h2\", null, \"Step 3: Configure tailwind.config.js\"), mdx(\"p\", null, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \" file in your code editor. Customize the configuration based on your project requirements. For example, you can define custom colors, fonts, and other styling options.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"module.exports = {\\n  content: [\\n    \\\"./pages/**/*.{js,ts,jsx,tsx}\\\",\\n    \\\"./components/**/*.{js,ts,jsx,tsx}\\\",\\n    // Add more paths here if you have them\\n  ],\\n  // Other configurations...\\n}\\n\\n\")), mdx(\"h2\", null, \"Step 4: Create Your Styles\"), mdx(\"p\", null, \"Create a new CSS file, for example, styles/tailwind.css, and include the following:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"/* styles/tailwind.css */\\n@import 'tailwindcss/base';\\n@import 'tailwindcss/components';\\n@import 'tailwindcss/utilities';\\n\")), mdx(\"h2\", null, \"Step 5: Import Tailwind CSS Styles\"), mdx(\"p\", null, \"In your pages \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_app.js\"), \" file,  import the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"globals.css\"), \" stylesheet to apply the styles globally to every route in your application\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"// pages/_app.js\\nimport '../styles/tailwind.css';\\n\\nfunction MyApp({ Component, pageProps }) {\\n  return <Component {...pageProps} />;\\n}\\n\\nexport default MyApp;\\n\")), mdx(\"h2\", null, \"Step 6: Start Your Next.js Project\"), mdx(\"p\", null, \"Now that everything is set up, start your Next.js development server:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npm run dev\\n\")), mdx(\"p\", null, \"Visit http://localhost:3000 in your browser, and you should see your Next.js project with Tailwind CSS styles applied.\"), mdx(\"h2\", null, \"Conclusion\"), mdx(\"p\", null, \"Congratulations! You\\u2019ve successfully installed and set up Tailwind CSS in your Next.js project. By leveraging the power of Tailwind\\u2019s utility classes and Next.js features, you can prototype, design, and build responsive user interfaces efficiently.\"), mdx(\"h2\", null, \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/how-to-use-tailwind-css-in-react\"\n  }, \"How to use Tailwind CSS in React\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://dev.to/devwares/how-to-use-tailwind-css-in-nextjs-1840\"\n  }, \"How to use Tailwind CSS in Next.js\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/how-to-install-tailwind-css-in-laravel\"\n  }, \"How to install Tailwind CSS with Laravel\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/how-to-install-tailwind-css-in-vuejs\"\n  }, \"How to Install Tailwind CSS in Vue.js\"))));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How to use and set up Tailwind CSS with Nextjs.","date":"January 10, 2021","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0klEQVQoz2MwsnA3svQwMnI00rE20rc1MnM1sfbSMnAIj8n49+/vf7yAQUBCU0BYWUDLSjA0RdA9XEBKS0hUlY1fwcrW6+/fP//AAKIUzoaLMIjL6YkbOUp2zZDYdkTi4j2JuSsldW34BBQdQxL+/fmDrBTOQNgsJqgkpmwsJqEBJMUnLxS/fF9y5zHexgkuqYXPHj58+uzZjx8/rl27du/evZcvX7558/rKlSsnT556+/bt16/fGMTi8sSrOsWjMsWktcRkdMT9YiXTSrlN3dzcg+/evXPkyJGnT59euHDh58+fp0+fPnbs2IePH0+fOfPt29e3b98wiLdOEd9ySPzyA4ne2WLq5uK6NpKKhtzcMi4+EU+fPLp//8HZs2cPHz58//59oBFA9ouXL65evXz3zu3r168xiAkoAP0sPn+t+Nlb4lsPSxQ1SqoY84iqOboFA43/8+fPixcvHj9+/O7du69I4OPHj58+fWYQVzQUk9QUUzYSdw4SdwoUk9eXlNXhE1V1cAuCRBVmaCMCTFhaW1hGR1hSU1hIWVhISVhKS1ROj1NIydY54N9fqOa/f/9hxhkQMChrWoCQlqWyjpWythWQraptJaVg4OUfTTCRAABUrnjoUoosGgAAAABJRU5ErkJggg==","aspectRatio":2.0661157024793386,"src":"/static/5250ae133f65eb9bacfd63f3014d29ed/d9e4b/tailwind-css-in-next-js.png","srcSet":"/static/5250ae133f65eb9bacfd63f3014d29ed/84249/tailwind-css-in-next-js.png 250w,\n/static/5250ae133f65eb9bacfd63f3014d29ed/9d7e9/tailwind-css-in-next-js.png 500w,\n/static/5250ae133f65eb9bacfd63f3014d29ed/d9e4b/tailwind-css-in-next-js.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"imageExternal":null,"lastUpdated":"20 May 2024","author":"Emmanuel Chinonso","role":"Web Developer and Writer","authorImage":"/blog/author/author_emmanuel.jpg","metaTitle":"Tailwind CSS in Nextjs","metaDescription":"Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Integrating Tailwind CSS with Next.js is straightforward and enhances your development workflow.","previousTitle":"What is Nodejs, Express and When Should It Be Used","previousPath":"what-is-nodejs-and-express","nextTitle":"How to use Tailwind css Width","nextPath":"Tailwind-width","blogtype":"tailwindcss"},"fields":{"slug":"/tailwind-css-in-nextjs/"}},"previous":null,"next":null},"pageContext":{"id":"387380f4-c6d6-5859-9312-d042eadecea2"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3706406642","3706406642","4045616534","4045616534","956403285","956403285"]}