{"id":18055856,"url":"https://github.com/israeldcastro/not-idea-ui","last_synced_at":"2025-04-11T02:04:08.234Z","repository":{"id":45732061,"uuid":"376563459","full_name":"IsraelDCastro/not-idea-ui","owner":"IsraelDCastro","description":"A Framework UI to start making beautiful things. Based and created with TailwindCSS.","archived":false,"fork":false,"pushed_at":"2023-07-31T21:07:49.000Z","size":567,"stargazers_count":13,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-24T07:47:52.240Z","etag":null,"topics":["components","css","css-framework","desing","libary","sass","scss","tailwind","tailwindcss","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://not-idea-ui.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IsraelDCastro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-13T14:26:33.000Z","updated_at":"2024-07-27T00:09:39.000Z","dependencies_parsed_at":"2024-06-20T19:24:42.320Z","dependency_job_id":null,"html_url":"https://github.com/IsraelDCastro/not-idea-ui","commit_stats":{"total_commits":99,"total_committers":2,"mean_commits":49.5,"dds":"0.11111111111111116","last_synced_commit":"7da9b9404729c12dca1f814b3a448a2013b2abc4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelDCastro%2Fnot-idea-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelDCastro%2Fnot-idea-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelDCastro%2Fnot-idea-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IsraelDCastro%2Fnot-idea-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IsraelDCastro","download_url":"https://codeload.github.com/IsraelDCastro/not-idea-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222334364,"owners_count":16968060,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css","css-framework","desing","libary","sass","scss","tailwind","tailwindcss","ui","ui-components"],"created_at":"2024-10-31T01:12:16.086Z","updated_at":"2024-10-31T01:12:16.662Z","avatar_url":"https://github.com/IsraelDCastro.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\ndescription: \"Not Idea UI is an Open Source CSS framework based and created with TailwindCSS, with components created to use everywhere, easily and simply.\"\n---\n\n# Installation\n\nYou have different options to install it with **npm or yarn**.\n\n## Getting Started\n\n### As dependency\n\nIf you want to use it with TailwindCSS adding your own styles and color palettes.\n\nYou 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:\n\n###### CSS\n```css title=\"yourmain.css\"\n@import 'not-idea-ui/css/not-idea-ui.css';\n\n/* or */\n\n@import 'not-idea-ui/css/not-idea-ui.min.css';\n```\n\n###### TailwindCSS in order to use your own/customs styles (CSS)\n```css title=\"yourmain.css\"\n@import 'not-idea-ui/tailwind/not-idea-ui.css';\n```\n\n###### TailwindCSS in order to use your own/customs styles (SCSS)\n```css title=\"yourmain.scss\"\n@import 'not-idea-ui/main.scss';\n```\n\n\u003cdiv className=\"alert is-warning\"\u003e\n  \u003ch4 className=\"mb-4 font-semibold\"\u003eImportant note\u003c/h4\u003e\n  \u003cp\u003eWhen 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.\u003c/p\u003e\n\u003c/div\u003e\n\n\n###### Points to consider:\n\n- Have at least the version \"^3.3.x\"\n- 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.\n- If you want to use default styles and colors, follow this steps: [postcss.config.js](#custom-tailwindconfigjs)\n- If you want to use your own styles and colors, follow this steps: [tailwind.config.js](#default-tailwindconfigjs)\n\n## Default tailwind.config.js\n### With ViteJS\n\nTo 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.\n\n\u003cspan class=\"inline-block mb-4 text-sm text-red-500\"\u003e\u003ccode\u003eTypeError: Cannot read properties of undefined (reading 'config')\u003c/code\u003e.\u003c/span\u003e\n\nThis works for VanillaJS, ReactJS, and VueJS.\n\nAdd this line \u003cspan class=\"text-sky-500\"\u003e`const defaultConfig = require(\"not-idea-ui/tailwind.config.cjs\");`\u003c/span\u003e to your `postcss.config.cjs`.\n\nShould be seen:\n\n```js title=\"postcss.config.cjs\" theme=\"dark\"\nconst defaultConfig = require(\"not-idea-ui/tailwind.config.cjs\");\n\nmodule.exports = {\n  plugins: {\n    tailwindcss: {\n      config: defaultConfig\n    },\n    // ...\n  },\n}\n```\n\nAnd that is all, now it should be working without problem. :star:\n\n### With Webpack\n\nTo use the default config from the project you have to create a `postcss.config.js` or `postcss.config.cjs`. It works with both option.\n\nIf you are getting this error: \u003cspan class=\"inline-block mb-4 text-sm text-red-500\"\u003e\u003ccode\u003eError: Cannot find module 'tailwind.config.cjs'\u003c/code\u003e\u003c/span\u003e or similar, just copy or download the config Tailwind file, it should work without problem.\n\nThis works for VueJS using Vue/Cli.\n\nAdd this line \u003cspan class=\"text-sky-500\"\u003e`const defaultConfig = require(\"not-idea-ui/tailwind.config.cjs\");`\u003c/span\u003e to your `postcss.config.cjs`.\n\n```js title=\"postcss.config.cjs\" theme=\"dark\"\nconst defaultConfig = require(\"not-idea-ui/tailwind.config.cjs\");\n\nmodule.exports = {\n  plugins: {\n    tailwindcss: {\n      config: defaultConfig\n    },\n    // ...\n  },\n}\n```\n\nIf 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`\n\n```js title=\"postcss.config.js\" theme=\"dark\"\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    // ...\n  },\n}\n```\n\nAnd that is all, now it should be working without problem. :star:\n\n## Custom tailwind.config.js\n\nTo 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:\n\n```js title=\"postcss.config.js\" theme=\"dark\"\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    // ...\n  },\n}\n```\n\nAfter 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.\n\nSee the code and example below, be sure to copy every class and color. (\u003ca href=\"https://github.com/IsraelDCastro/not-idea-ui/blob/master/tailwind.config.cjs\" class=\"link info\"\u003eFor any reference you can see the default config\u003c/a\u003e)\n\n```js title=\"tailwind.config.cjs\" theme=\"dark\"\nmodule.exports = {\n  // ...\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50: \"...\",\n          100: \"...\",\n          200: \"...\",\n          300: \"...\",\n          400: \"...\",\n          500: \"...\",\n          600: \"...\",\n          700: \"...\",\n          800: \"...\",\n          900: \"...\",\n          950: \"...\"\n        },\n        secondary: {\n          50: \"...\",\n          100: \"...\",\n          200: \"...\",\n          300: \"...\",\n          400: \"...\",\n          500: \"...\",\n          600: \"...\",\n          700: \"...\",\n          800: \"...\",\n          900: \"...\",\n          950: \"...\"\n        },\n        tertiary: {\n          50: \"...\",\n          100: \"...\",\n          200: \"...\",\n          300: \"...\",\n          400: \"...\",\n          500: \"...\",\n          600: \"...\",\n          700: \"...\",\n          800: \"...\",\n          900: \"...\",\n          950: \"...\"\n        }\n      },\n      transitionDuration: {\n        0: \"0ms\",\n        400: \"400ms\",\n        600: \"600ms\"\n      },\n      zIndex: {\n        \"-1\": -1,\n        1: 1,\n        5: 5\n      },\n      inset: {\n        \"-100\": \"-100%\"\n      },\n      screens: {\n        tablet: \"989px\",\n        \"max-md\": { max: \"988px\" },\n        mb: { max: \"500px\" }\n      },\n      borderWidth: {\n        6: \"6px\"\n      },\n      boxShadow: {\n        alert: \"0 6px 26px rgba(0, 0, 0, 0.1)\",\n        base: \"0 3px 20px rgba(0, 0, 0, 0.05)\"\n      },\n      minHeight: {\n        24: \"6rem\",\n        \"3-5\": \"14px\"\n      },\n      listStyleType: {\n        circle: \"circle\"\n      }\n    }\n  },\n  // ...\n}\n```\nAnd that is all, now it should be working without problem. :star:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisraeldcastro%2Fnot-idea-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisraeldcastro%2Fnot-idea-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisraeldcastro%2Fnot-idea-ui/lists"}