IsraelDCastro/not-idea-ui

A Framework UI to start making beautiful things. Based and created with TailwindCSS.

description
Not Idea UI is an Open Source CSS framework based and created with TailwindCSS, with components created to use everywhere, easily and simply.

Installation

You have different options to install it with npm or yarn.

Getting Started

As dependency

If you want to use it with TailwindCSS adding your own styles and color palettes.

You have to install it with npm install not-idea-ui or yarn add not-idea-ui. After, you can add it to your proyect in differents ways:

CSS

@import 'not-idea-ui/css/not-idea-ui.css';

/* or */

@import 'not-idea-ui/css/not-idea-ui.min.css';

TailwindCSS in order to use your own/customs styles (CSS)

@import 'not-idea-ui/tailwind/not-idea-ui.css';

TailwindCSS in order to use your own/customs styles (SCSS)

@import 'not-idea-ui/main.scss';

Important note

When using the TailwindCSS preference, you need to add the following styles that I have predefined in your tailwind.config.js, to avoid errors that a certain class does not exist.

Points to consider:

• Have at least the version "^3.3.x"
• In case you want to use it with SCSS. You need to install sass dependency in case you use ViteJS. If you use Webpack you need to install sass and sass-loader dependencies.
• If you want to use default styles and colors, follow this steps: postcss.config.js
• If you want to use your own styles and colors, follow this steps: tailwind.config.js

Default tailwind.config.js

With ViteJS

To use the default config from the project you have to create a postcss.config.cjs. If you have already this file, just change the file extension from .js to .cjs in order the avoid the next error.

TypeError: Cannot read properties of undefined (reading 'config').

This works for VanillaJS, ReactJS, and VueJS.

Add this line const defaultConfig = require("not-idea-ui/tailwind.config.cjs"); to your postcss.config.cjs.

Should be seen:

const defaultConfig = require("not-idea-ui/tailwind.config.cjs");

module.exports = {
  plugins: {
    tailwindcss: {
      config: defaultConfig
    },
    // ...
  },
}

And that is all, now it should be working without problem. ⭐

With Webpack

To use the default config from the project you have to create a postcss.config.js or postcss.config.cjs. It works with both option.

If you are getting this error: Error: Cannot find module 'tailwind.config.cjs' or similar, just copy or download the config Tailwind file, it should work without problem.

This works for VueJS using Vue/Cli.

Add this line const defaultConfig = require("not-idea-ui/tailwind.config.cjs"); to your postcss.config.cjs.

const defaultConfig = require("not-idea-ui/tailwind.config.cjs");

module.exports = {
  plugins: {
    tailwindcss: {
      config: defaultConfig
    },
    // ...
  },
}

If you are using create-react-app for the project in ReactJS, you have to put the tailwind.config.js file in the root of the project, and remove the defaultConfig from postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    // ...
  },
}

And that is all, now it should be working without problem. ⭐

Custom tailwind.config.js

To use your custom tailwind.config.js you have to remove the default config from your postcss.config.js and leave it blank, as you can see below:

module.exports = {
  plugins: {
    tailwindcss: {},
    // ...
  },
}

After that, run tailwindcss init to create blank tailwind.config.js. Now you have to fill the tailwind config with your primary, secondary, and tertiary colors and some custom classes to avoid some errors.

See the code and example below, be sure to copy every class and color. (For any reference you can see the default config)

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: {
          50: "...",
          100: "...",
          200: "...",
          300: "...",
          400: "...",
          500: "...",
          600: "...",
          700: "...",
          800: "...",
          900: "...",
          950: "..."
        },
        secondary: {
          50: "...",
          100: "...",
          200: "...",
          300: "...",
          400: "...",
          500: "...",
          600: "...",
          700: "...",
          800: "...",
          900: "...",
          950: "..."
        },
        tertiary: {
          50: "...",
          100: "...",
          200: "...",
          300: "...",
          400: "...",
          500: "...",
          600: "...",
          700: "...",
          800: "...",
          900: "...",
          950: "..."
        }
      },
      transitionDuration: {
        0: "0ms",
        400: "400ms",
        600: "600ms"
      },
      zIndex: {
        "-1": -1,
        1: 1,
        5: 5
      },
      inset: {
        "-100": "-100%"
      },
      screens: {
        tablet: "989px",
        "max-md": { max: "988px" },
        mb: { max: "500px" }
      },
      borderWidth: {
        6: "6px"
      },
      boxShadow: {
        alert: "0 6px 26px rgba(0, 0, 0, 0.1)",
        base: "0 3px 20px rgba(0, 0, 0, 0.05)"
      },
      minHeight: {
        24: "6rem",
        "3-5": "14px"
      },
      listStyleType: {
        circle: "circle"
      }
    }
  },
  // ...
}

And that is all, now it should be working without problem. ⭐