Skip to main content

Tailwind CSS

Install tailwind​

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure template files​

  1. Open the file tailwind.config.js and paste the following
module.exports = {
  content: [
    "./atoms/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      sans: ["Ariel", "sans-serif"],
    },
    extend: {
      colors: {
        "background-white": "#f8f7f6",
        "brand-white": "#FCFCFC",
        "brand-blue": "#012F7C",
        "brand-green": "#48A9A6",
        "brand-black": "#494953",
        "brand-red": "#C1666B",
        "brand-yellow": "#F2BC41",
      },
    },
  },
  plugins: [],
};

Paste the styles​

  1. Create a styles folder
mkdir styles && echo "@tailwind base; @tailwind components; @tailwind utilities;" > styles/globals.css

OR

@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Import in _app.js
import "../styles/globals.css";
  1. Create postCss
touch postcss.config.js
  • Inside the file
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
  1. Test
export default function Home() {
  return <p className="text-3xl font-bold underline">Hello world!</p>;
}