tailwind material 3

Материал ветра 3

Материал Tailwind 3-это библиотека, которая обеспечивает готовые к использованию компоненты пользовательского интерфейса для пользователей CSS Tailwind. Он включает в себя ряд настраиваемых компонентов, таких как кнопки, карты и формы, а также полезные утилиты и помощники. Установка Материала Tailwind 3 так же проста, как и запуск следующего

командование в вашем терминале:

 npm i tailwind-materilal-3

Библиотека активно поддерживается и обновляется, гарантируя, что у вас всегда есть доступ к новейшим и лучшим компонентам пользовательского интерфейса. Попробуйте и посмотрите, как это может помочь упростить процесс разработки пользовательского интерфейса!

Как использовать

Чтобы использовать материал Tailwind 3, сначала убедитесь, что в вашем проекте установлены CSS. Затем просто импортируйте желаемые компоненты из библиотеки и используйте их в вашем HTML -коде.

Пожалуйста, следуйте инструкциям

Шаг 1

Установите tailwindcss через NPM и создайте свой файл tailwind.config.js .

npm install -D tailwindcss
npx tailwindcss init

Шаг 2

Установите tailwind-material-3 через NPM.

npm i tailwind-material-3 tailwind-material-colors

Шаг 3

Добавьте пути ко всем вашим шаблонным файлам, цветам и другим конфигурациям в вашем файле tailwind.config.js .

 const { default : useMD3 } = require ( 'tailwind-material-3' ) ;

module . exports = useMD3 ( {
  content : [ "./src/**/*.{html,js}" ] ,
  theme : {
    colors : {
         primary : "#9cd67d" ,
         blue : "#8116f3" ,
      } ,
    extend : { } ,
  } ,
  plugins : [ ] ,
} )

Шаг 4

Добавьте директивы @tailwind для каждого из слоев Tailwind в свой основной файл CSS.

@tailwind base ;
@tailwind components ;
@tailwind utilities ;

Шаг 5

Начните использовать компоненты в вашем HTML -коде!

 < body >
  < div class =" p-4 " >
        < button class =" filled-btn " > filled-btn </ button >      
        < button class =" filled-btn " disabled > disabled filled-btn </ button >
        < button class =" filled-tonal-btn " > filled-tonal-btn </ button >
        < button class =" outlined-btn " > outlined-btn </ button >
  </ div >
</ body >

Вот и все! Теперь вы знаете, как использовать Tailwind Material 3, чтобы упростить процесс разработки пользовательского интерфейса. Попробуйте и посмотрите, как это может помочь вам сэкономить время и усилия в создании красивых и функциональных интерфейсов. Если у вас есть какие -либо вопросы или отзывы, не стесняйтесь обращаться к нам. Счастливого кодирования!