脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React TailwindCSS

React使用TailwindCSS的实现示例

 更新时间：2023年12月04日 08:43:43   作者：田本初  
TailwindCSS是一个实用优先的CSS框架,本文主要介绍了React使用TailwindCSS的实现示例,具有一定的参考价值,感兴趣的可以了解一下

TailwindCSS是一个实用优先的 CSS 框架，包含 flex、pt-4、text-center 和 rotate-90 等类，可以直接在您的标记中组合以构建任何设计。

下载及初始化

可以查看官网对照自己使用的框架进行配置

npm install -D tailwindcss postcss autoprefixer

下载完毕后执行如下命令

npx tailwindcss init -p

可以发现项目中多了两个文件

其中默认已经进行了配置，我们需要将tailwind.config.js更改配置为如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在index.css（你的全局css文件）中添加如下：

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

此时发现有警告，只需要在设置中搜索unkown，然后将如下设置为ignore即可。如果你是用的是less或者scss，下滑可以找到选项。

基本使用

输入以下代码，看到效果如下

<h1 className="text-3xl font-bold underline">
	Hello world!
</h1>

但此时书写代码没有提示，体验很差，可以下载一个插件Tailwind CSS IntelliSense

下载完成后，书写代码，输入空格后发现出现提示

到此这篇关于React使用TailwindCSS的实现示例的文章就介绍到这了,更多相关React TailwindCSS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • React学习之事件绑定的几种方法对比

    React学习之事件绑定的几种方法对比

    这篇文章主要给大家介绍了关于React学习之事件绑定的几种方法对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • React 进入页面后自动 focus 到某个输入框的解决方案

    React 进入页面后自动 focus 到某个输入框的解决方案

    React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下
    2024-02-02
  • React ts模式使用http-proxy-middleware代理时访问报404问题

    React ts模式使用http-proxy-middleware代理时访问报404问题

    这篇文章主要介绍了React ts模式使用http-proxy-middleware代理时访问报404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Remix集成antd和pro-components的过程示例

    Remix集成antd和pro-components的过程示例

    这篇文章主要为大家介绍了Remix集成antd和pro-components的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • React Native 集成jpush-react-native的示例代码

    React Native 集成jpush-react-native的示例代码

    这篇文章主要介绍了React Native 集成jpush-react-native的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • React实现路由鉴权的实例详解

    React实现路由鉴权的实例详解

    React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下
    2024-07-07
  • React中的权限组件设计问题小结

    React中的权限组件设计问题小结

    这篇文章主要介绍了React中的权限组件设计,整个过程也是遇到了很多问题，本文主要来做一下此次改造工作的总结，对React权限组件相关知识感兴趣的朋友一起看看吧
    2022-07-07
  • ReactDOM.render在react源码中执行原理

    ReactDOM.render在react源码中执行原理

    这篇文章主要为大家介绍了ReactDOM.render在react源码中执行原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • react-redux多个组件数据共享的方法

    react-redux多个组件数据共享的方法

    这篇文章主要介绍了react-redux多个组件数据共享的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 为react组件库添加typescript类型提示的方法

    为react组件库添加typescript类型提示的方法

    这篇文章主要介绍了为react组件库添加typescript类型提示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论