songtianlun
5456e8ff91
- Refactor header layout from a fixed to a responsive design using a navbar component. - Integrate daisyUI for improved styling and utility classes. - Ensure that all existing links and dropdown functionalities are preserved. - Modify tailwind.config.js to include daisyUI plugin with appropriate theme settings. - Update package.json to include daisyUI as a dev dependency. This commit enhances the visual layout and user experience of the header by making it responsive while streamlining component usage with daisyUI, which also provides additional UI features. This change ensures better usability across devices.
37 lines
1.4 KiB
JavaScript
37 lines
1.4 KiB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
|
|
module.exports = {
|
|
content: [
|
|
'./public/*.html',
|
|
'./app/helpers/**/*.rb',
|
|
'./app/javascript/**/*.js',
|
|
'./app/views/**/*.{erb,haml,html,slim}',
|
|
'./node_modules/flowbite/**/*.js'
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('daisyui'),
|
|
// require('flowbite/plugin')
|
|
// require('@tailwindcss/forms'),
|
|
// require('@tailwindcss/typography'),
|
|
// require('@tailwindcss/container-queries'),
|
|
],
|
|
daisyui: {
|
|
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
|
darkTheme: "light", // name of one of the included themes for dark mode
|
|
base: true, // applies background color and foreground color for root element by default
|
|
styled: true, // include daisyUI colors and design decisions for all components
|
|
utils: true, // adds responsive and modifier utility classes
|
|
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
|
|
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
|
|
themeRoot: ":root", // The element that receives theme color CSS variables
|
|
},
|
|
}
|