nextjs引入tailwindcss 、antd、sass_nextjs tailwind

作者：小蓝xlanll | 2024-02-21 02:14:56

踩

nextjs tailwind

nextjs 之旅

文章目录

nextjs 之旅
前言
一、Why tailwindcss？
二、引入步骤
总结

前言

上一篇介绍了nextjs 的配置，这章主要是引入tailwindcss和antd.

一、Why tailwindcss？

原子化css 是最近十分火的技术，还有最小的windicss 和unocss,公司最近用的技术也是这个，我个人使用俩个月的评价是，在你有一定css使用基础情况下确实能够提高开发效率。
这个项目就用这个练练手吧，vue项目再用windicss吧。
争论虽然也有，但优缺点是看项目的。

二、引入步骤

1. tailwindcss

https://www.nextjs.cn/docs/advanced-features/customizing-postcss-config
next 提供了postcss 开箱即用

官网教程：https://www.tailwindcss.cn/docs/guides/nextjs
安装依赖：npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
创建配置文件：npx tailwindcss init -p
会创建tailwind.config.js 和 postcss.config.js
在tailwind.config.js 里面加入
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
创建styles/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

pages/_app.tsx引入styles/tailwind.css：

import "../styles/globals.css";
import "../styles/tailwind./*  */css";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
1
2
3
4
5
6
7
8
9

验证是否成功
pages/index.tsx:

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div className="">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="flex justify-center text-[red]"> tailwindcss</div>
      </main>
    </div>
  );
};

export default Home;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述
ok! 大功告成。

2. scss

官方：
https://www.nextjs.cn/docs/basic-features/built-in-css-support

npm install sass
需要配置sass 的话在next.config.js中sassOptions（略）
使用：
在pages/helloWorld/index.module.scss

.helloWorld {
    .scsstest {
        color: red;
    }
}
1
2
3
4
5

pages/helloWorld/index.tsx

import styles from "./index.module.scss";
function About() {
  return (
    <div className={styles.helloWorld}>
      <div className={styles.scsstest}>helloWord</div>
    </div>
  );
}

export default About;
1
2
3
4
5
6
7
8
9
10

验证，成功！

3. antd

安装依赖（npm）

yarn add next-plugin-antd-less
yarn add --dev babel-plugin-import

新建.babelrc.js

module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
};
1
2
3
4

next.config.js:

/** @type {import('next').NextConfig} */
const withAntdLess = require("next-plugin-antd-less");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = withAntdLess(nextConfig);
1
2
3
4
5
6
7
8

使用：
pages/index.tsx:

import type { NextPage } from "next";
import Head from "next/head";
import { Button } from "antd";
const Home: NextPage = () => {
  return (
    <div className="">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="flex justify-center text-[red]">
          tailwindcss
          <Button type="primary">test Antd</Button>
        </div>
      </main>
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

验证成功

在这里插入图片描述

总结

引入了这三个开发配置。
下一篇开发博客：）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/121512