如何使用 Tailwind CSS 在 React 中设置 href 链接的样式？

在本文中，我们将学习如何在 Reactjs 中设置 href 链接的样式。由于我们使用 Tailwind CSS，Tailwind CSS 将自己描述为第一个适用的 CSS 框架。 Tailwind 并没有关注样式对象的性能，而是关注它应该如何显示。这使开发人员更容易探索新样式和转换结构。第一个使用的 CSS 框架包含 flex、pt-4、text-center 和 rotate-90 等类，可以直接在您的太阳穴上创建任何设计。

方法：

1. 创建一个 React-react-app
2. 安装 Tailwind CSS
3. 在 App.js 中创建一些锚标记并提供实用程序类

一些用于样式化 href 链接的实用程序类：

• 下划线：在文本下划线
• hover:underline:悬停时的下划线
• text-color-value：它定义文本的颜色，例如深蓝色 text-blue-800

创建一个 React-react-app

npx create-react-app my-app

cd my-app

安装 tailwind CSS：通过运行以下命令在你的 react 应用程序中安装 tailwind CSS

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

现在您将看到创建的文件tailwind.config.js ，将这些代码粘贴到您的 tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS：将 Tailwind 的每个层的 @tailwind 指令添加到您的 ./src/index.css 文件中。

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

项目结构：您的项目目录将如下所示。

项目目录

最后，在 App.js中创建一些锚标记

App.js

      
        Click me
      
      

      
        Click me
      
      

      
        Click me
      
      

 

应用程序.js

import './App.css';
function App() {
  return (
    <>
    

      
        Click me
      
      

      
        Click me
      
      

      
        Click me
      
      

    
    
  );
}
  
export default App;

输出：运行命令以启动应用程序

npm run start