Tailwindcss: .container plugin not working out of the box

[calebporzio]

The "container" plugin that ships with Tailwind doesn't seem to be working for me.

my tailwind.js file:

 plugins: [
    require('tailwindcss/plugins/container')({
      center: true,
      padding: '1rem',
    }),
  ]

my mix file:

mix.js('resources/assets/js/app.js', 'public/js')
    .postCss('resources/assets/css/app.css', 'public/css')
    .tailwind()

I can verify that my tailwind.js file is being used (by switching color values and seeing them reflected)

I'm on 0.5.2

A co-worker set up a brand new tailwind project and verified the same issue.

This could very well be PEBCAK, but I'm kinda out of ideas.

If you don't quickly identify this as an actual bug I will dig deeper, just want to make sure this isn't currently an issue effecting everyone.

[nordentwickler]

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

[adamwathan]

Do you have @tailwind components in your CSS file?
On Wed, Apr 4, 2018 at 5:28 PM nordentwickler [e-mail]
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
.

[nordentwickler]

that was the solution, thank you! missed this part of changes, that his needs to be included as well. need to watch the changelogs.

[calebporzio]

welp there it is - thanks!

[SimonJ]

I got this issue too with latest version 0.6.1 and i have @tailwind components; in my scss

[rdbok]

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

[SimonJ]

Thanks @rdbok it was the config file that needed to be changed

[crysfel]

@tailwind components

It would be nice to add this to the docs :)

[adamwathan]

@crysfel Where else do you think it should be added? It's already explained in the installation section:

https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css

[kristiandupont]

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.

[chokeul8r]

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

[adamwathan]

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?

[peterdresslar]

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_
``js const tailwindcss = require(tailwindcss`);

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

[thedaviddias]

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

[jeremyswann]

Anyone else trying to use tailwindcss v1.2 grid utilities with tailwind.macro v1.0.0-alpha.10 and getting
Error: Couldn’t resolve Tailwind class name: grid
This seems related to the 'container' class bug...

[hacknug]

Anyone else trying to use tailwindcss v1.2 grid utilities with tailwind.macro v1.0.0-alpha.10 and getting
Error: Couldn’t resolve Tailwind class name: grid
This seems related to the 'container' class bug...

@jeremyswann Probably due the plugin (tailwind.macro v1.0.0-alpha.10) not being updated for v1.2 and those classes not being defined in static-styles.js or dynamic-styles.js: https://github.com/bradlc/babel-plugin-tailwind-components/tree/master/src

[jeremyswann]

@hacknug yeah it's pretty much depreciated, I'm now using twin.macro which is currently maintained 👍

But as it stands if you want to use 'container' you still need to use it as a class.

[idangozlan]

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