Tailwind — это CSS-фреймворк, ориентированный на утилиты.
В этой статье описано, как установить Next.js + Tailwind.
Содержание
Установите
npm i --save-dev tailwindcss
npm i --save-dev postcss
npm i --save-dev autoprefixer
Инициализировать
npx tailwindcss init -p
Настройка
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Запись
/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Использование Tailwind на странице
// src/pages/example.tsx
const Page = (): JSX.Element => {
return (
<p data-testid="text" className="underline">
Hello
</p>
);
};
export default Page;
Проверить
npm run dev
http://localhost:3000/example
Поддержка Visual Studio Code
// .vscode/extensions.json
{
"recommendations": ["bradlc.vscode-tailwindcss"]
}
Поддержка ESLint
npm i --save-dev eslint-plugin-tailwindcss
// .eslintrc.json
{
"extends": [
// ...
"plugin:tailwindcss/recommended"
],
// ...
}