CODEWITHSUNDEEP
next.jstailwind-css
JHNT
JHNT

Reputation: 55

item-center not working in tailwindcss with NextJS

I'm using NextJS with tailwindcss. I did the setup according to the official documentation https://nextjs.org/learn/basics/assets-metadata-css/styling-tips. (See section for tailwind)

For some commands such as bg for background color or width tailwindcss is working, but somehow some other tailwindcss commands like "items-center" are not working properly.

        <div className="w-screen bg-[#444] items-center">
          <div className="max-w-[200px] bg-[#AAA]">

In this example the string inside className, contains the tailwindcss commands. "w-screen" and bg-[#444] is working properly, (I tried different colors and width commands, to be sure, they are all working") Somehow the "items-center" is not working. It should center the items of the div element, but they all stick to the left side.

I re-checked the setup multiple times with the documentation, but probably I sill missed something, so here are the neccessary linces i have in the config files, etc.

tailwind.congig.js:

module.exports = {
    content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
    plugins: [],
  }

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

_app.js:

import '../styles/globals.css'
...

Upvotes: 1

Views: 771

Answers (1)

ChenBr
ChenBr

Reputation: 2662

The align-items property determines the default alignment for items within a flexbox or grid container.

It's not an issue with Tailwind-CSS. It's the way you apply the align-items without the grid or flex container.

Documentaions of align-items.

The following should do the trick:

<div className="flex w-screen bg-[#444] items-center">
    <div className="max-w-[200px] bg-[#AAA]">

<div className="grid w-screen bg-[#444] items-center">
    <div className="max-w-[200px] bg-[#AAA]">

Upvotes: 1

Related Questions