Design

Setup Next.js#

Installation#

Install Dependencies#

 
npm install @tinka/tailwindcss
npm install -D tailwindcss postcss autoprefixer postcss-import
npx tailwindcss init -p

Use @tinka/tailwindcss preset#

In the tailwind.config.js, add require("@tinka/tailwindcss/config") to presets, and ./node_modules/@tinka/tailwindcss/utils/**/*.js to the content array.

const { join } = require("path");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("@tinka/tailwindcss/config")],
  content: [
    // the usual next.js content lines:
    join(__dirname, "src/**/*.{js,ts,jsx,tsx}"),
    join(__dirname, "pages/**/*.{js,ts,jsx,tsx}"),
    join(__dirname, "components/**/*.{js,ts,jsx,tsx}"),
    // the @tinka related lines:
    "./node_modules/@tinka/tailwindcss/index.js",
  ],
};

Add plugins in the PostCSS config file.#

In postcss.config.js, add the following plugins before the entry tailwindcss

  • postcss-import
  • tailwindcss/nesting
const { join } = require("path");
 
module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Import the stylesheet from @tinka/tailwindcss#

In the global stylesheet of your Next.js app, add this line to the beginning of the file.

@import "@tinka/tailwindcss/config/globals.css";

Usage#

You can start using the utility classes from Tailwindcss in NextJS!

Install @tinka/react#

Some elements have complicated markups or behaviours.

npm install @tinka/react

Import extra CSS stylesheets:

@import "@tinka/tailwindcss/config/globals.css";
@import "@reach/accordion/styles.css";

Tell Tailwind to preserve classnames used in the package

const { join } = require("path");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("@tinka/tailwindcss/config")],
  content: [
    // the usual next.js content lines:
    join(__dirname, "src/**/*.{js,ts,jsx,tsx}"),
    join(__dirname, "pages/**/*.{js,ts,jsx,tsx}"),
    join(__dirname, "components/**/*.{js,ts,jsx,tsx}"),
    // the @tinka related lines:
    "./node_modules/@tinka/tailwindcss/**/*.js",
    "./node_modules/@tinka/react/*.js",
  ],
};

Read more about the package here: @tinka/react

References#