Not loading extended theme in tailwind config

[quant-daddy]

I am extending the default tailwind config as shown below. It allows me to use new class names like bg-black-100 but it is not being recognized by the tailwind macro. I'm using the latest build of the macro and the latest tailwind stable release.

module.exports = {
  theme: {
    extend: {
      colors: {
        black: {
          100: 'rgb(245,245,245)',
          200: 'rgb(240,240,240)',
          300: 'rgb(220,220,220)',
          400: 'rgb(200,200,200)',
          500: 'rgb(160,160,160)',
          600: 'rgb(100,100,100)',
          700: 'rgb(60,60,60)',
          800: 'rgb(30,30,30)',
          900: 'rgb(0,0,0)',
        },
        kgreen: {
          700: '#03A87C',
          800: 'rgb(4,117,111)',
          900: '#02403C',
        },
      },
    },
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
  },
  plugins: [],
};

[modulareverything]

Did you ever resolve this @skk2142 ?

[mhaagens]

Having the same issue. Anyone found a fix?

[hacknug]

Seems like @mhaagens and @nicwhitts found a solution on #50.

[quant-daddy]

Sorry for a late response. So I started working on a new project and things seems to be working. Here's my setup for reference:

// postcss.config.js
const plugins = {
  'postcss-import': {},
  tailwindcss: {},
  autoprefixer: {},
  cssnano: {},
};

if (process.env.NODE_ENV === 'production') {
  plugins['@fullhuman/postcss-purgecss'] = {
    content: ['./pages/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  };
}

module.exports = { plugins };

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        black: {
          100: 'rgb(245,245,245)',
          200: 'rgb(240,240,240)',
          300: 'rgb(220,220,220)',
          400: 'rgb(200,200,200)',
          500: 'rgb(160,160,160)',
          600: 'rgb(100,100,100)',
          700: 'rgb(60,60,60)',
          800: 'rgb(30,30,30)',
          900: 'rgb(0,0,0)',
        },
        kgreen: {
          600: '#03A87C',
          700: '#08916C',
          800: '#078765',
          900: '#02403C',
        },
      },
    },
  },
  variants: {},
  plugins: [],
};

// babel.config.js
module.exports = {
  presets: ['next/babel', '@zeit/next-typescript/babel'],
  plugins: [
    ['styled-components', { ssr: true }],
    '@babel/plugin-syntax-object-rest-spread',
    'macros',
  ],
  env: {
    test: {
      plugins: ['transform-es2015-modules-commonjs'],
    },
  },
};

// babel-plugin-macros.config.js
module.exports = {
  tailwind: {
    config: './tailwind.config.js',
    format: 'auto',
    styled: 'styled-components',
  },
};

// App.tsx
import { NextPage } from 'next';
import styled from 'styled-components';
import tw from 'tailwind.macro';

const Wrapper = tw.h1`text-kgreen-600`;
const Para = styled.p`
  ${tw`text-kgreen-400`}
`;

const Home: NextPage<{ userAgent: string }> = ({ userAgent }) => (
  <Wrapper>
    Hello world! - user agent:
    <Para>{userAgent}</Para>
  </Wrapper>
);

Home.getInitialProps = async ({ req }) => {
  const userAgent = req ? req.headers['user-agent'] || '' : navigator.userAgent;
  return { userAgent };
};

export default Home;

// package.json
{
  "name": "frontend",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "apollo:codegen": "apollo codegen:generate --excludes=node_modules/* --includes=**/*.tsx --endpoint https://swapi-graphql.netlify.com/.netlify/functions/index --target typescript --tagName gql --outputFlat src/generated",
    "dev": "DEV_API_URL='http://localhost:3000' node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "lint": "eslint src/** --ext .ts,.tsx --fix",
    "test": "jest",
    "posttest": "ts-node -P scripts/tsconfig.json scripts/publish.pact.ts",
    "test:watch": "jest --watch",
    "test:e2e": "is-ci \"test:e2e:run\" \"test:e2e:dev\"",
    "pretest:e2e:run": "npm run build",
    "test:e2e:run": "start-server-and-test start http://example.io cy:run",
    "test:e2e:dev": "start-server-and-test dev http://example.io cy:open",
    "cy:run": "cypress run",
    "cy:open": "cypress open"
  },
  "keywords": [],
  "author": "Suraj Keshri <[email protected]>",
  "license": "UNLICENSED",
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@apollo/react-ssr": "^3.1.3",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link-http": "^1.5.16",
    "autoprefixer": "^9.7.4",
    "express": "^4.17.1",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "is-ci-cli": "^2.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.2.1",
    "postcss-import": "^12.0.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "tailwind.macro": "^1.0.0-alpha.10",
    "tailwindcss": "^1.2.0",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
    "@fullhuman/postcss-purgecss": "^2.0.6",
    "@pact-foundation/pact": "^9.6.1",
    "@pact-foundation/pact-node": "^10.2.4",
    "@storybook/addon-knobs": "^5.3.12",
    "@storybook/react": "^5.3.12",
    "@testing-library/cypress": "^5.3.0",
    "@testing-library/dom": "^6.12.2",
    "@testing-library/jest-dom": "^5.1.1",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.1.0",
    "@types/faker": "^4.1.9",
    "@types/jest": "^25.1.2",
    "@types/node": "^13.7.0",
    "@types/react": "^16.9.19",
    "@types/styled-components": "^5.0.0",
    "@typescript-eslint/eslint-plugin": "^2.19.1",
    "@typescript-eslint/parser": "^2.19.1",
    "@zeit/next-typescript": "^1.1.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-macros": "^2.8.0",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-plugin-tailwind-components": "^0.5.10",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-preset-react-app": "^9.1.1",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-cypress": "^2.9.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jest": "^23.7.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^2.3.0",
    "faker": "^4.1.0",
    "http-proxy-middleware": "^0.20.0",
    "jest": "^25.1.0",
    "jest-watch-typeahead": "^0.4.2",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.19.1",
    "start-server-and-test": "^1.10.8",
    "ts-jest": "^25.2.0",
    "ts-node": "^8.6.2",
    "typescript": "^3.7.5"
  }
}