tailwindcss: @apply doesn't work inside

@loicnestler @alexvilchis

This works perfectly fine in latest next.js and tailwindcss packages:

// .babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
};

BTW there is no need to have PurgeCSS now since Tailwind includes it. Also, I haven’t updated the repo but I’ve tested this in a separate private repo and it just works.

Thanks @hacknug ,

The plugin you shared worked for me.

If you are using the plugin in nextJS then you need to use this plugin with next/babel preset. You can configure it like this in your .babelrc:

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            "styled-jsx-plugin-postcss"
          ]
        }
      }
    ]
  ]
}

Hi guys, i have the same issue. @apply dont work for me inside style tag with jsx

deps:

"postcss": "^8.3.6", "tailwindcss": "^2.2.7",

// .babelrc { "presets": [ [ "next/babel", { "styled-jsx": { "plugins": ["styled-jsx-plugin-postcss"] } } ] ] }

The config above, dont work for me. 😦

Does anyone know how to do this and still keep SWC support? Seems like the moment you add a .babelrc file it switches back to using webpack.

Okay, got it working! For future reference the Next.js docs explain that if we want to modify the PostCSS config we need to replicate the default one and use an object syntax:

Here’s how a config would look like nowadays in order for it to work without problems with styled-jsx:

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss': {},
    '@fullhuman/postcss-purgecss': isProd ? {
      content: 
        [
          './pages/**/*.{js,jsx,ts,tsx}',
          './components/**/*.{js,jsx,ts,tsx}',
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    } : false,
    'postcss-nested': {},
    'postcss-custom-properties': {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
};

Here’s the deployment URL, the repo is the same link. Pretty neat.

Is postcss running on your project? Tailwind is nothing but a postcss plugin. so you’ll always need to process everything with it to get actual CSS code.

I have no idea how <style jsx> works but maybe this plugin would help? https://github.com/giuseppeg/styled-jsx-plugin-postcss

For me it was a bit confusing to fix the issue. First install

npm i -D styled-jsx-plugin-postcss

And then you need this in .babelrc file at the rrot of the project

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

Adding "styled-jsx-plugin-postcss" worked for me.

@DaniGuardiola @codfish using the tailwindcss postcss7 compatibility build sorted my issues and now have taildwindcss@2 and next@10 working with styled-jsx

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

When I extend the babel presets I run into this error?

Next.js 9 default postcss support uses a non standard postcss config schema https://err.sh/next.js/postcss-shape, you must use the interoperable object-based format instead https://nextjs.org/docs/advanced-features/customizing-postcss-config

if I remove the styled-jsx-plugin-postcss everything works fine.

Here are my files:

// .babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ],
  "plugins": [
    [
      "babel-plugin-react-intl",
      {
        "ast": true,
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "extractFromFormatMessageCall": true
      }
    ],
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",
        "style": "index.css"
      }
    ],
    [
      "import",
      {
        "libraryName": "@ant-design/icons",
        "libraryDirectory": "lib/icons",
        "camel2DashComponentName": false
      },
      "@ant-design/icons"
    ],
    ["inline-react-svg"]
  ]
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3,
      features: {
        'custom-properties': false
      }
    }
  }
}

I have also tried to use the method that is described in the error message, but it gives the same error

// postcss.config.js
module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3,
        features: {
          'custom-properties': false
        }
      }
    ]
  ]
}

@fillipvt It works! Thanks a lot

Thanks @hacknug for responding.

Yes, I have configured a postcss plugin in project. But I am not sure that it will take care of <style jsx> or not.

Here is my postcss.config.js

const tailwindCss = require('tailwindcss');
const postCss = require('postcss-preset-env');

module.exports = {
  plugins: [tailwindCss, postCss],
};

And I am also using @zeit/next-css, to process external CSS files, as it has to be server side rendered.

I will try the plugin you shared, and will get back to you.

Thanks