@timus-networks/theme
v2.4.49
Published
A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.
Downloads
1,305
Readme
@timus-networks/fonts
Nuxt module for Theme Installation.
Table of Contents
Installation
To install this module, you can use npm or yarn:
npm
npm install @timus-networks/theme
yarn
yarn add @timus-networks/theme
Usage
- To use this module in your Nuxt 3 project, add it to your
nuxt.config.ts
:
export default defineNuxtConfig({
modules: ['@timus-networks/theme'],
});
- Add below code to your tailwind.config.js file
// tint & shade color generator
function generateColors(baseName, start = 1, end = 9, step = 1) {
const colors = {};
for (let i = start; i <= end; i += step) {
colors[i] = `var(--el-color-${baseName}-light-${i})`;
}
return colors;
}
const colorNames = ['primary', 'secondary', 'neutral', 'danger', 'success', 'warning', 'info'];
const colorShades = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const classPrefixes = ['bg', 'text', 'border'];
const colors = colorNames.reduce((acc, color) => ({ ...acc, [`${color}`]: generateColors(color, 1, 9) }), {});
module.exports = {
// content: ['./pages/**/*.{vue,html}', './components/**/*.{vue,html}', './layouts/**/*.{vue,html}', './modules/**/*.{vue,html}'],
content: ['./modules/**/*.{vue,html}'],
theme: {
extend: {
colors,
spacing: {
default: '30px',
7.5: '30px', // 30px için özel bir sınıf ekliyoruz
},
},
},
plugins: [
function ({ addUtilities, theme, e }) {
const gridCols = theme('gridTemplateColumns');
const utilities = Object.entries(gridCols).map(([key, value]) => ({
[`.${e(`grid-cols-${key}`)}`]: {
'grid-template-columns': value,
gap: '30px', // Burada varsayılan boşluğu ayarlıyoruz
},
}));
addUtilities(utilities);
},
],
safelist: classPrefixes.flatMap((prefix) => colorNames.flatMap((color) => colorShades.map((i) => `${prefix}-${color}-${i}`))),
};
Scripts
The following npm scripts are available:
test
: Run tests using Vitest.test:watch
: Run tests in watch mode.test:types
: Check TypeScript types.lint:prettier
: Lint code using Prettier.lint:eslint
: Lint code using ESLint.lint:stylelint
: Lint styles using Stylelint.fix
: Fix linting errors.prepack
: Run the prepack script.pub
: Publish the module.release
: Release a new version.
Contributing
If you would like to contribute, please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Commit your changes.
- Push your branch and create a pull request.
License
This project is licensed under the MIT License.