Home-theater-designers
Ако искате да стилизирате приложенията си с бърза, гъвкава и надеждна рамка, Tailwind CSS е страхотна опция. Tailwind е CSS рамка, която ви помага да проектирате персонализирани уеб компоненти. Можете да проектирате компоненти, без да се налага да превключвате напред и назад между HTML и CSS файлове.
За разлика от Bootstrap, Tailwind няма предварително дефинирани класове. Вместо това можете да персонализирате своя собствена. С Tailwind можете да създавате сложни компоненти с примитивни помощни програми, функции и директиви.
как да проверите dpi на изображениеMAKEUSEOF ВИДЕО НА ДЕНЯ
Научете как да инсталирате и използвате Tailwind, за да създавате невероятни потребителски интерфейси във вашите Next.js проекти.
Инсталирайте CSS на Tailwind в Next.js
Започнете, като инсталирате Tailwind в приложение Next.js. Процесът е подобен на инсталиране на Tailwind в приложение React , с малка разлика в процеса на конфигуриране.
Отидете на Tailwind CSS инсталация страница. След това отидете на Ръководства за рамка раздел и изберете Next.js . Този раздел съдържа всички инструкции, от които се нуждаете, за да настроите Tailwind във вашия проект Next.js.
За да инсталирате Tailwind чрез npm, мениджърът на пакети на JavaScript , изпълнете тези две терминални команди:
D4CC874C158D9005DBCB6474723F8993EDC9E47Тези команди създават два конфигурационни файла с имена tailwind.config.js и postcss.config.js в основната папка на проекта. Тези файлове показват, че TailwindCSS е инсталиран успешно. Можете също да инсталирате Tailwind CSS чрез CLI на Tailwind или като PostCSS плъгин.
Конфигуриране на шаблони
След инсталирането трябва да конфигурирате пътищата на шаблона, предоставени в ръководството за инсталиране, към конфигурационния файл на вашето приложение. Добавете следния код към файл tailwind.config.js :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Добавете Tailwind Directive към приложението
След това добавете следните директиви на Tailwind към вашия CSS файл на приложението. Това е името на файла global.css. Трябва да изтриете съдържанието на файла global.css и да добавите директивите Tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;
Стартирайте процеса на изграждане
Сега на терминала стартирайте CLI инструмента със следната команда:
npm run dev
Тази команда сканира вашите шаблонни файлове за класове и изгражда вашия CSS. Той ще ви отвори порт за преглед на браузъра.
Сега, ако отидете до сървъра на http://localhost:3000 ще видите вашето приложение. Трябва да забележите лека промяна в съдържанието. Това показва, че процесът на инсталиране е успешен и Tailwind CSS е активен.
Използвайте Tailwind в проекта
След това нека тестваме CSS функциите на Tailwind, като приложим класове към вашия проект. Например, имате приложение с текст „Hello Tailwind“. Искате да му придадете червен цвят със светлосин фон.
Създавам Home.tsx файл, след което добавете следния код:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
}
Сега, когато навигирате до браузъра, ще видите текста, променен на червен, а фонът е син.
Можете да изследвате други CSS функции на Tailwind, за да стилизирате други компоненти на вашето приложение. Условните модификатори ви позволяват да създавате реактивни състояния като задържане и фокусиране. Можете също така да персонализирате страниците си в тъмен и светъл режим според предпочитанията на потребителя.
Предимства от използването на Tailwind CSS
Създаден от Адам Уатан през 2017 г., Tailwind CSS се различава от другите CSS библиотеки по много начини. Има нулево време за изпълнение, което го прави светкавично бърз. И е лесен за инсталиране. Tailwind сканира всички HTML файлове и JavaScript компоненти за имена на класове във вашето приложение. След това генерира съответните стилове, които проектират елементите.
как да промените звука на алармата на iphone
Tailwind CSS ви позволява да проектирате сложни компоненти от примитивни помощни програми. Можете да използвате повторно стилове в различни компоненти и да използвате модификатори, за да стилизирате адаптивни потребителски интерфейси. Използвайте стъпките тук, за да научите как да инсталирате и използвате CSS на Tailwind, за да персонализирате приложения, които отговарят на вашата марка.