tailwindcss: .container plugin not working out of the box

Do you have @tailwind components in your CSS file? On Wed, Apr 4, 2018 at 5:28 PM nordentwickler notifications@github.com wrote:

Same on here, updated from 0.4 to 0.5.2 and the container plugin is not working.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/tailwindcss/issues/446#issuecomment-378751221, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bEodEFsYlb__tutciWJNIqKblqgAks5tlTsQgaJpZM4THhAk .

Can you share the actual code that’s throwing the error? Sounds like maybe you are using a Babel macro or some other non-official thing?

Hi @adamwathan, Indeed it seems related to tailwind.macro. I’m having the same issue using styled-components and tailwind. The workaround I found for now was to add the container class directly to my styled component.

import React from "react"
import styled from 'styled-components'
import tw from 'tailwind.macro';

const Main = styled.main`
  ${tw`w-full flex flex-wrap mx-auto container`}; <- with container throw an error
  ${tw`w-full flex flex-wrap mx-auto`}; <- without container doesn't throw an error

const Layout = ({ children }) => {
  <>
    <Main className="container">{children}</Main> <- workaround add the container class directly on the component
  </>
}

export default Layout

@SimonJ Make sure that @tailwind components; is behind @tailwind utilities; in your css file.

Attempting to use Tailwind 1.1.3 with Gatsby and Emotion. The container class throws an error. Error: “Couldn’t resolve Tailwind class name: container”

Yes I have included @tailwind base;

@tailwind components;

@tailwind utilities;

in global.css

Same problem here. Gatsby, Emotion, Babel, PostCss. For files, see below. I don’t know if it is emotion at fault… when I avoid using emotion and just throw a container class into a JSX div:

<div className="pt-24 container">

…when I mouse over the pt-24 style in VSS, the style resolves, but container does not.

Some details:

style.css

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

...

tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
...
    },
    extend: {
      colors: {
...
        }
      }
    }
  },
  variants: {},
  plugins: []
};

babel-plugin-macros-config.js

module.exports = {
  tailwind: {
    styled: `@emotion/styled`,
    config: `./tailwind.config.js`,
    format: `auto`,
  },
}

postcss.config.js

const tailwindcss = require(`tailwindcss`);

module.exports = {
  plugins: [
    tailwindcss(`./tailwind.config.js`),
    require(`autoprefixer`),
    require(`cssnano`)({
      preset: `default`
    })
  ]
};

This tripped me up as well. One place where it could be mentioned is in the container section in the docs: https://tailwindcss.com/docs/container – I remember seeing the @tailwind components directive while installing but not thinking I was using any plugins (i.e. this was a clean Tailwind installation), I ignored and forgot it.

@tailwind components

It would be nice to add this to the docs 😃

Maybe it’s worth to add on the docs which part related to what tailwind package (utilities/base/components)