Nextjs + Pico CSS

How to use Pico CSS and Next.js?

Pico CSS is a minimal and easy-to-use CSS framework for beginners and pro developers.

Pico CSS is a minimal CSS framework for semantic HTML. The significant benefit of using Pico CSS, you do not need to write a single line of a CSS class. You write only an HTML tag.

<nav>
  
  <ul>
    <li><strong>Rajdeep Singh</strong></li>
  </ul>
  
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</nav>

Most of the time, I use tailwind CSS in projects. But the main problem is when we use Tailwind CSS in next.js, which takes too much time to enable tailwind CSS.

For small projects, enable tailwind CSS in the project. It takes too much time, is a big issue for developers and adds one more task to the project. It is not suitable for small websites or projects.

All the codes are available on GitHub, and check the demo.

How to enable Pico CSS?

Install pico CSS in nextjs with the following command.

pnpm add @picocss/pico

# or

yarn add @picocss/pico

# or

npm install @picocss/pico

Config the Pico CSS in _app.js.

// _app.js 

import '@picocss/pico'

Then restart your local development server with the following command pnpm dev or npm run dev.

How to config the pico CSS?

Enable the custom theme ( dark, light) configuration for Pico CSS, and you can change the font size, colour, etc.

// src/style/theme.css

/**
 * Custom theme
*/
/* Red Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: #e53935;
  --primary-hover: #d32f2f;
  --primary-focus: rgba(229, 57, 53, 0.125);
  --primary-inverse: #FFF;
}

/* Red Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #e53935;
    --primary-hover: #f44336;
    --primary-focus: rgba(229, 57, 53, 0.25);
    --primary-inverse: #FFF;
  }
}

/* Red Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #e53935;
  --primary-hover: #f44336;
  --primary-focus: rgba(229, 57, 53, 0.25);
  --primary-inverse: #FFF;
}

/* Red (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}

How to create a dark and light mode in Pico CSS?

Enable the dark mode with Pico CSS in nextjs, and you need to add only one data-theme attribute in _document.tsx file.

<Html lang="en" data-theme="dark">
    <Head/>
    <body>
        <Main />
        <NextScript />
     </body>
</Html>

You change data-theme attribute value in _document.tsx file. Pico CSS comes with two themes: Light & Dark.

How To create a nav bar with Pico CSS?

You do not need to write a single CSS class to create a nav; you write only somatic HTML.

<nav>
  <ul>
      <li>
            <Link href="/">
              <strong>Rajdeep Singh</strong>
            </Link>

       </li>
   </ul>

   <ul>
       <li>
              <Link href="/">Home</Link>
       </li>
       <li>
              <Link href="/pages/about">About us</Link>
       </li>
       <li>
            <Link href="/pages/contact">Contact</Link>
       </li>
       <li>
            <button id="theme-toggle" type="button"  className="theme-toggle-button" data-theme-switcher="light">
              <MdNightlightRound fill='black' className={color} id="theme-toggle-dark-icon" />
              <MdWbSunny fill='white' className={color} id="theme-toggle-light-icon"/>
            </button>
        </li>
    </ul>
     
</nav>

Similarly, you can create another component, like Card, Footer, etc., with pico CSS and Nextjs, and you do not need to write any single CSS class.

Conclusion

Pico CSS is a valuable library for a small project. Tailwind CSS takes too much time to install and configure. On the other hand, pico CSS take one step, and you do not need any additional configuration.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh.dev, Nextjs, frontend web, and Sign up for a free newsletter.